文本框（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';
  };
})();

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

# js光标定位到文本框  # 文本框光标位置  # Javascript实现获取及设置光标位置的方法  # js光标定位文本框回车表单提交问题的解决方法  # JS在可编辑的div中的光标位置插入内容的方法  # js实现获取焦点后光标在字符串后  # js获取光标位置和设置文本框光标位置示例代码  # 在页面中js获取光标/鼠标的坐标及光标的像素坐标  # js切换光标示例代码  # js/html光标定位的实现代码  # javascript textarea光标定位方法(兼容IE和FF)  # JavaScript中在光标处插入添加文本标签节点的详细方法  # 按下  # 文本框  # 自己的  # 表单  # 移到  # 值为  # 就不  # 不动  # 多少个  # 情况下  # 在这个  # 第一个  # 只会  # 英文  # 才可以  # 自定义  # 不支持  # 这本书  # 要将  # 会把 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 微信公众帐号开发教程之图文消息全攻略  如何快速生成橙子建站落地页链接？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  javascript读取文本节点方法小结  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  如何用VPS主机快速搭建个人网站？  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Laravel storage目录权限问题_Laravel文件写入权限设置  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  如何快速搭建自助建站会员专属系统？  Laravel如何自定义错误页面（404, 500）？（代码示例）  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何使用Gate和Policy进行授权？（权限控制）  如何在腾讯云服务器上快速搭建个人网站？  实例解析Array和String方法  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  如何在自有机房高效搭建专业网站？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何在建站主机中优化服务器配置？  如何快速搭建高效香港服务器网站？  如何在宝塔面板中创建新站点？  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Python文件异常处理策略_健壮性说明【指导】  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  Laravel如何使用Livewire构建动态组件？（入门代码）  晋江文学城电脑版官网 晋江文学城网页版直接进入  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  EditPlus中的正则表达式 实战(1)  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  如何在建站之星绑定自定义域名？  jQuery validate插件功能与用法详解  如何在阿里云香港服务器快速搭建网站？  html5的keygen标签为什么废弃_替代方案说明【解答】  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel如何实现数据库事务？（DB Facade示例）  Laravel如何处理文件下载请求？（Response示例）  高端智能建站公司优选：品牌定制与SEO优化一站式服务  Swift开发中switch语句值绑定模式  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  如何用搬瓦工VPS快速搭建个人网站？  java ZXing生成二维码及条码实例分享