文本框倒叙输入
所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入123456789时，在输入框上显示的是987654321。
为什么要做这个Demo？是因为在项目中遇到了，项目需求是两个输入框，一个正序输入，另一个倒叙输入。 下面我把实现的思路和代码写出来。
文本倒叙输入：
只要我们保证输入框的焦点始终在第一位，这样的话就可以实现每次我们输入的都在最前面，即倒叙
代码：
1 function setPosition(ctrl, pos) { //设置光标位置函数 2 if (ctrl.setSelectionRange) { 3 ctrl.focus(); 4 ctrl.setSelectionRange(pos, pos); 5 } else if (ctrl.createTextRange) { 6 var range = ctrl.createTextRange(); //创建一个选择区域 7 range.collapse(true); //将光标移动到选择区域的开始位置 8 range.moveEnd('character', pos); //改变选择区域结束的位置 9 range.moveStart('character', pos); //改变选择区域开始的位置 10 range.select(); //将选择的内容同步到当前的对象 11 } 12 }
只要我们将参数pos设为0就可以了。
下面是一个完整的Demo，这个Demo实现了正常删除和倒叙输入。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <style> 7 .content { 8 width: 300px;margin:0 auto;margin-top:50px; 9 } 10 ul { 11 list-style: none; 12 } 13 .elem { 14 width: 200px; 15 } 16 17 </style> 18 <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 19 </head> 20 <body> 21 <div style=""> 22 <ul> 23 <li> 24 <input type="text" class="elem"> 25 </li> 26 <li> 27 <input type="text" class="elem"> 28 </li> 29 <li> 30 <input type="text" class="elem"> 31 </li> 32 </ul> 33 </div> 34 <script> 35 function setPosition(ctrl, pos) { //设置光标位置函数 36 if (ctrl.setSelectionRange) { 37 ctrl.focus(); 38 ctrl.setSelectionRange(pos, pos); 39 } else if (ctrl.createTextRange) { 40 var range = ctrl.createTextRange(); //创建一个选择区域 41 range.collapse(true); //将光标移动到选择区域的开始位置 42 range.moveEnd('character', pos); //改变选择区域结束的位置 43 range.moveStart('character', pos); //改变选择区域开始的位置 44 range.select(); //将选择的内容同步到当前的对象 45 } 46 } 47 $('.elem').on('keypress keyup', function() { 48 if(event.keyCode === 8) 49 return; 50 setPosition(this,0); 51 }); 52 </script> 53 </body> 54 </html>
另外在附上相关的获取焦点位置的函数，可能你会用到
1 function getPosition(ctrl) { 2 // IE Support 3 var CaretPos = 0; 4 if (document.selection) { 5 ctrl.focus(); 6 var Sel = document.selection.createRange(); 7 Sel.moveStart('character', -ctrl.value.length); 8 CaretPos = Sel.text.length; 9 } 10 // Firefox support 11 else if (ctrl.selectionStart || ctrl.selectionStart == '0') 12 CaretPos = ctrl.selectionStart; 13 return (CaretPos); 14 }
总结：
实现了设置和获取文本输入焦点，我们就可以做一些其他的特效，比如删除一整个单词或者变量等等。
如果你有关于此文的好想法，可以@me，希望此文能够帮助你！
