点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

通过js获取文本框光标位置及定位到文本框，附完整代码

来源：懂视网责编：小采时间：2020-11-27 20:24:24

通过js获取文本框光标位置及定位到文本框，附完整代码

通过js获取文本框光标位置及定位到文本框，附完整代码:文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人关于通过js获取文本框光标位置及定位到文本

推荐度：

点击下载本文 文档为doc格式

导读通过js获取文本框光标位置及定位到文本框，附完整代码:文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人关于通过js获取文本框光标位置及定位到文本

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

***html***

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

注意：上面的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获取文本框光标位置及定位到文本框的方法请关注Gxl网！

通过js获取文本框光标位置及定位到文本框，附完整代码

推荐度：

点击下载本文 文档为doc格式

标签：文本框 js 光标

热门焦点

通过js获取文本框光标位置及定位到文本框，附完整代码

通过js获取文本框光标位置及定位到文本框，附完整代码

通过js获取文本框光标位置及定位到文本框，附完整代码

最新推荐

猜你喜欢

热门推荐