首页 / JAVASCRIPT / JavaScript自定义文本框光标

JavaScript自定义文本框光标

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript自定义文本框光标，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6088字，纯文字阅读大概需要9分钟。

内容图文

文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人的想法。

【************************基本思路***************************】

对于键盘操作来说，光标的基本操作不外乎最基本的三个键：左箭头（left arrow）、右箭头（right arrow）和退格键（backspace）。

左箭头：让光标向左移动，添加字符或者删除字符

右箭头：让光标向右移动，添加字符或者删除字符

退格键：删除字符

【******** 在聊如何通过JS实现光标具有的基本功能时，先介绍一些html和css ********】

***html***

<div class="cursor_module">
  <p class="cursor_content"></p><span class="cursor"></span>
</div>

注意：上面的html格式只是模拟光标，输入字符还是需要靠表单元素的。在页面上，笔者会把真正的表单元素隐藏，只会显示模拟光标的html

<form id="chatting_form" class="clearfix" enctype="application/x-www-form-urlencoded">
    <label for="chatting_msg"></label><input type="text" id="chatting_msg" autofocus name="chatting_msg">
 </form>

第一行：模拟光标第二行：表单元素里的光标

***CSS***

.cursor_module{
  position: relative;
}
.cursor_content{
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: 90%;
  word-wrap: break-word;
  overflow: hidden;
  display: inline-block;
  white-space: pre;
}
.cursor{
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 16px;
  display: inline-block;
  background: green;
  z-index: 1000;
}

【*************************** 正式开始介绍JS ******************************】

**左箭头**

1、没有输入文字，按下左箭头，光标仍处于left值为0的位置。

2、当输入了文字后（即：文本框的value值不为空），按下左箭头，光标向左移动。

限制条件：当移动到left值为0的位置时，即使继续按左箭头，光标都不会继续向左移动【光标在其left值必须大于0的条件下才可以移动】

if(cCode===37 && chatting_msg.value!=''){
   if(aSpan_l>0){
      aSpan.style.left=aSpan_l-aSpan_w+'px';
   }
}

**右箭头**

1、没有文字输入，按下右箭头，光标仍处于left值为0的位置。

2、当输入了文字后，按下右箭头，光标向右移动。

限制条件：当移到文本内容最后一个字符的后面时，即使继续按右箭头，光标都不会继续向右移动【光标的left值等于p元素的宽度时，就是光标处于最后一个字符的位置】

else if(cCode===39 && chatting_msg.value!=''){
  aSpan.style.left=aSpan_l+aSpan_w+'px';
    if(aSpan_l===aP_width){
       aSpan.style.left=aP_width+'px';
     }
}

**退格键**

1、当没有字符存在的时候，按下删除键，模拟光标并不会向左移动，保持在原有的位置

2、删除一个字符，光标的位置就向左移动一个单位（在这个例子中是6px）；

else if(cCode===8){
  if(chatting_msg.value!=''){
     aP.innerHTML=chatting_msg.value;
     if(aSpan_l!=0){
       aSpan.style.left=aSpan_l-aSpan_w+'px';
      }
   }else{
      aSpan.style.left=0;
    }
      //if enter backspace,remove move event
      JM.removeHandler(chatting_msg,'input',move,false);
 }

**其他按键**

else{
    //show value by keyup not keydown,because keydown will slow step;
    JM.addHandler(chatting_msg,'keyup',function () {
        aP.innerHTML=chatting_msg.value;
    },false);
    JM.addHandler(chatting_msg,'input',move,false);
}
var move=function () {
  var aSpan=JM.getEles('.cursor')[0],
    aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
    aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
  aSpan.style.left=aSpan_l+aSpan_w+'px';
};

问题：为什么笔者会将输入框的value值赋值给p元素的innerHTML这行代码【aP.innerHTML=chatting_msg.value;】放置在 keyup 事件处理程序中？

在事件为keydown（或keypress）情况下，执行将文本框的value值赋值给p元素的innerHTML，实际情况下，如果输入两个字符 ‘ab'，但是在p元素内显示的就只有第一个字符 ‘a'。

简单来说就是，keydown或keypress对于文本框本身而言显示字符是没有问题，就是你输入多少个字符就显示多少个字符，但是对于要将文本内容显示在p元素内，则会 “反应慢一拍” 。

【提示：笔者对其他非字符键还未作任何处理】

【************************* 补充 ******************************】

1、为了在按下退格键时不影响光标的正确定位，需要在按下退格键时把 ”move“函数取消掉

-------JM.removeHandler(chatting_msg,'input',move,false);

2、代码中存在的JM.xxxx，是笔者的代码库

　 JM.addHandler(...)：添加事件处理程序

　 JM.removeHandler(...)：删除事件处理程序

JM.getStyle(...)：获取计算机样式的值

>>>>>>>>>>>具体的代码可以参考《JavaScript高级程序设计》这本书

3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号，暂时不支持输入中文

《《《《《《《完整代码》》》》》》》》》

var Cursor=(function () {
  var chatting_msg=JM.getEles('[name=\'chatting_msg\']')[0];
  var cursor_module=JM.getEles('.cursor_module')[0];
  var chatting_footer=JM.getEles('.chatting_footer')[0];
  //create elements
  var cP=document.createElement('p');
  var cSpan=document.createElement('span');
  JM.addClass(cP,'cursor_content');
  JM.addClass(cSpan,'cursor');
  JM.addNodes(cursor_module,cSpan);
  JM.addNodes(cursor_module,cP);
  //keydown
  JM.addHandler(chatting_msg,'keydown',function (event) {
    var ev=JM.getEvent(event),
      cCode=JM.getCharCode(ev);
    var aP=JM.getEles('.cursor_content')[0],
      aSpan=JM.getEles('.cursor')[0];
    var aP_width=parseInt(JM.getStyle(aP,'width'));//get aP real width
    var aSpan_l=parseInt(JM.getStyle(aSpan,'left')),//get span left
      aSpan_w=parseInt(JM.getStyle(aSpan,'width'));//get span width
    var val=chatting_msg.value;
    //left arrow
    //没有value值，按左箭头不动
    //有value值，按右箭头，光标向左移，但移到前面一个字符的后面就不可以再移动
    if(cCode===37 && chatting_msg.value!=''){
      if(aSpan_l>0){
        aSpan.style.left=aSpan_l-aSpan_w+'px'; 
      }
    }
    //right arrow
    //没有value值，按右箭头不动
    //有value值，按右箭头，光标向右移，但移到最后一个字符的后面就不可以再移动
    else if(cCode===39 && chatting_msg.value!=''){
      aSpan.style.left=aSpan_l+aSpan_w+'px';
      if(aSpan_l===aP_width){
        aSpan.style.left=aP_width+'px';
      }
    }
    //backspace
    else if(cCode===8){
      if(chatting_msg.value!=''){
        aP.innerHTML=chatting_msg.value;
        if(aSpan_l!=0){
          aSpan.style.left=aSpan_l-aSpan_w+'px';
        }
      }else{
        aSpan.style.left=0;
      }
      //if enter backspace,remove move event
      JM.removeHandler(chatting_msg,'input',move,false);
    }
    else{
      //show value by keyup not keydown,because keydown will slow step;
      JM.addHandler(chatting_msg,'keyup',function () {
        aP.innerHTML=chatting_msg.value;
      },false);
      JM.addHandler(chatting_msg,'input',move,false);
    }
  },false);
  //move cursor in the text
  var move=function () {
    var aSpan=JM.getEles('.cursor')[0],
      aSpan_l=parseInt(JM.getStyle(aSpan,'left')),
      aSpan_w=parseInt(JM.getStyle(aSpan,'width'));
    aSpan.style.left=aSpan_l+aSpan_w+'px';
  };
})();

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！　　

内容总结

以上是互联网集市为您收集整理的JavaScript自定义文本框光标全部内容，希望文章能够帮你解决JavaScript自定义文本框光标所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/345550.html

来源：【匿名】

【上一篇】基于JS实现仿百度百家主页的轮播图效果【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript自定义文本框光标】教程文章相关的互联网学习教程文章

JavaScript自定义媒体播放器【代码】

使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒体文件的播放。组合使用属性、事件和这两个方法，很容易创建一个自定义的媒体播放器，如下面的例子所示。 1<div class="mediaplayer"> 2<div class="video"> 3<video id="player" src="movie.mov" poster="mymovie.jpg" 4 width="300" height="200"> 5 Video player not available.6</video> 7</div> 8<div class="controls"> 9<input type="button" ...

javascript和jquey的自定义事件小结【代码】【图】

“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好对象之间通过直接方法调用来交互1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成；方法调用方和被调用方被紧密耦合在一起；因为发送消息和接收消息是在一个动作内完成，所以无...

HTML页面弹出自定义对话框带遮蔽罩（使用JavaScript）【代码】

转载：http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html原理其实很简单：首先绘制弹出的自定义对话框，将其使用display:none隐藏，因为设置为none，其在页面中并不占用空间；遮蔽罩使用一个div，然后将其宽高设置为整个显示窗口大小，配置其透明度，在将其z-index属性大于主页面的z-index的值，也就是遮蔽层在主页面上方，如此即可事先隐藏一个div，在需要的时候调出显示既可。<!--以下代码从网上多处学习整合而成，由于来源...

javascript教程系列42:标签上自定义属性的操作【代码】

1 获取标签属性语法: element.getAttribute(‘属性名‘) 返回对应属性的值 ,如果没有返回null.//html <div id="box" index="0"></div>//jsvar box = document.getElementById(‘box‘); var value = box.getAttribute(‘index‘); console.log(value) // 02 设置自定义属性的值语法: element.setAttribute(‘属性名‘, ‘属性的值‘) 返回undefined//html <div id="box" ></div>//jsvar box = document.getElementById(‘box‘); b...

在JS中，一个自定义函数如何调用另一个自定义函数中的变量

function aa1511() { var chengshi="马鞍山"; var shengfen="安徽省"; return shengfen+"@"+chengshi; } function xialachaxun() { var hanshu=aa1511().split("@"); alert(hanshu[0]+‘,‘+hanshu[1]); }原文：http://www.cnblogs.com/smght/p/5266494.html

js contextmenu 自定义右键菜单【代码】【图】

右键菜单的设定主要是通过contextmenu事件来激活，由于contextmenu事件是冒泡的，所以可以为document来指定事件，进行页面中该事件的统一处理。同时，因为contextmenu是一个鼠标事件，所以在event中包含有鼠标位置等一系列信息，可以通过这个来实现对浏览器右键菜单的模拟。为了兼容现在的主流浏览器，所以先做一个通用的事件加载函数：1function eventHandler(dom,type,fn){ 2if(typeof dom.addEventListener != ‘undefined‘){ ...

JS自定义对象，正则表达式，JQuery中的一些知识点【图】

一：自定义对象1.基本概念：①对象：包含一系列无序属性和方法的集合。②键值对：对象中的数据是以键值对的形式存在的，以键取值。③属性：描述对象特征的一系列变量。[对象中的变量]④方法：描述对象行为的一系列方法。[对象中的函数]2. 对象的声明：①字面量声明：var obj={}；②new 关键字：var lisi = new Object(); 3.对象中属性和方法的读写方式：①通过.运算符：对象内部：this.属性名 this.方法名();　　　　　　对象外部：...

js事件模型与自定义事件【代码】

JavaScript 一个最简单的事件模型，需要有事件绑定与触发，也许还要有事件删除。 1var eventModel = {2 list: {},3 4 bind: function () {5var args = [].slice.apply(arguments),6 type = args[0],7 handlers = args.slice(1);8 9if (typeof type === ‘string‘ && handlers.length > 0) { 10for (var i = 0; i < handlers.length; i++) { 11if (typeof handlers[i] === ‘function‘) { 12if (!this.list[type]) { 1...

js原生创建模拟事件和自定义事件的方法【代码】【图】

让我万万没想到的是,原来《JavaScript高级程序设计(第3版)》里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法.1. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().我们使用如下页面做测试 1 <!DOCTYPE html>2 <html>3 <head lang="zh-CN">4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-s...

JavaScript自定义事件和触发(createEvent, dispatchEvent)【代码】

$(dom).addEvent("ft", function() {alert("走起"); });// 创建 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("ft", false, false);// 触发, 即弹出文字 dom.dispatchEvent(evt); //type:HTMLEvents MouseEvents(也可以以此来检测是否是移动端) UIEvents document.createEvent(type) // 初始化，事件类型，是否冒泡，是否阻止浏览器的默认行为event.initEvent(type，false，false) // 触发 element....

微信JSSDK自定义微信分享

使用微信JSSDK自定义微信分享标题、描述、和图标微信公众号jssdk自定义分享，二次分享自定义失败解决技巧原文：https://www.cnblogs.com/hool/p/12629615.html

JS创建 trim（）方法，此方法在IE7、IE8中不存在需要自定义【代码】

javascript自定义滚动条插件，几行代码的事儿【代码】

在实际项目中，经常由于浏览器自带的滚动条样式太戳，而且在各个浏览器中显示不一样，所以我们不得不去实现自定义的滚动条，今天我就用最少的代码实现了一个自定义滚动条，代码量区区只有几十行，使用起来也非常方便。<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>自定义滚动条</title><style type="text/css"> body,ul,dl,dd{ margin:0; padding:0; font-size:12px; ...

grunt 自定义任务实现js文件的混淆及加密【代码】【图】

1//自定义任务 2 module.exports = function (grunt) {3// 项目配置 4var http = require(‘http‘);5var qs = require(‘querystring‘);6var fs=require("fs");7 8function write(name,temp){9 fs.writeFile("./release/"+name,temp,"utf8",function(err){ 10if(err){ 11 grunt.log.error(‘BODY: ‘ + err); 12 } 13 }); 14 } 1516 grunt.initConfig({ 17 minJs:{ 18 ...

JavaScript学习笔记- 自定义滚动条插件【代码】

此滚动条仅支持竖向（Y轴）一、Css 1/*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/ 2body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }3 4/*滚动文本及滚动条大框*/ 5.scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y...

首页 / JAVASCRIPT / JavaScript自定义文本框光标

JavaScript自定义文本框光标

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript自定义文本框光标】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

文本框 - 相关标签

自定义 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程