文本框倒叙输入

2024-04-27 14:19:35

字体：大中小

来源：转载

供稿：网友

文本框倒叙输入

所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入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 support11         else if (ctrl.selectionStart || ctrl.selectionStart == '0')12             CaretPos = ctrl.selectionStart;13         return (CaretPos);14     }