web前端|js教程
js,文本框
web前端-js教程
文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人关于通过js获取文本框光标位置及定位到文本框的想法。
android 应用市场 源码,阿里最新源 ubuntu,爬虫案例 精灵说,php引入其他php,嘻哈seolzw
【************************基本思路***************************】
十字准心源码,简单vscode,ubuntu 启动管理器,修复tomcat,sqlite 多个程序,服务器怎么装网站吗,免费播放插件视频,如何套用前端框架,python 金融爬虫,php教学点,外投seo,设计主题资源网站,asp单个网页源码,青春 网页模板,404报错页面模板,学生管理系统界面代码,外贸商城程序lzw
对于键盘操作来说，光标的基本操作不外乎最基本的三个键：左箭头（left arrow）、右箭头（right arrow）和退格键（backspace）。
安卓 浏览器 源码,vscode做web,ubuntu发射,tomcat日志mysql,c 操作sqlite加锁,wordpress好玩插件,前端做app用什么框架,机械爬虫 科学制作,php非法字符,seo搜索指令,网站下方弹广告,vb 获取网页源代码,模板机器视频教程lzw
【******** 在聊如何通过JS实现光标具有的基本功能时，先介绍一些html和css ********】
***html***
***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 ******************************】
**左箭头**
**右箭头**
**退格键**
**其他按键**
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;};
【************************* 补充 ******************************】
《《《《《《《 完整代码 》》》》》》》》》
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获取文本框光标位置及定位到文本框的方法请关注php中文网！
