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 style 中visibility和display之间的区别
Jan 22 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
vue router 用户登陆功能的实例代码
Apr 24 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里8个鲜为人知的安全函数分析
2014/12/09 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
jquery中this的使用说明
2010/09/06 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python制作图片缩略图
2019/04/30 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
品恩科技软件测试面试题
2014/10/26 面试题
客服主管岗位职责
2013/12/13 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
银行求职自荐信范文
2015/03/04 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android