JavaScript自定义文本框光标


Posted in Javascript onMarch 05, 2017

文本框(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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 #Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 #Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 #Javascript
详解vue父子模版嵌套案例
Mar 04 #Javascript
vue指令以及dom操作详解
Mar 04 #Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 #Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
yii数据库的查询方法
2015/12/28 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
php解决安全问题的方法实例
2019/09/19 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
javascript 必知必会之closure
2009/09/21 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
北大研究生linux应用求职信
2013/10/29 职场文书
好的演讲稿开场白
2013/12/30 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
公司财务部岗位职责
2015/04/14 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android