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 相关文章推荐
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JS实现水平移动与垂直移动动画
Dec 19 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
教你如何使用php session
2013/10/28 PHP
php画图实例
2014/11/05 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
js模块加载方式浅析
2017/08/12 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
什么是Rollback Segment
2013/04/22 面试题
车间调度岗位职责
2013/11/30 职场文书
小学生操行评语
2014/04/22 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
婚宴来宾致辞
2015/07/28 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Redis如何实现分布式锁
2021/08/23 Redis
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
关于mysql中string和number的转换问题
2022/06/14 MySQL