The so-called text box flashback input means that the focus of the input box is always at the beginning. As shown in the picture, when I input 123456789, 987654321 is displayed on the input box.
Why do you want to do this demo? It's because I encountered it in the project. The project requirements are two input boxes, one for forward input and the other for backward input. Below I will write out the implementation ideas and code.
Text flashback input:
As long as we ensure that the focus of the input box is always at the first place, then we can realize that every time we input is at the front, that is, flashback
Code:
function setPosition(ctrl, pos) { //设置光标位置函数 if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); //创建一个选择区域 range.collapse(true); //将光标移动到选择区域的开始位置 range.moveEnd('character', pos); //改变选择区域结束的位置 range.moveStart('character', pos); //改变选择区域开始的位置 range.select(); //将选择的内容同步到当前的对象 } }
As long as we set the parameter pos to 0.
The following is a complete Demo, which implements normal deletion and flashback input.
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> .content { width: 300px;margin:0 auto;margin-top:50px; } ul { list-style: none; } .elem { width: 200px; } </style> <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> </head> <body> <div > <ul> <li> <input type="text" class="elem"> </li> <li> <input type="text" class="elem"> </li> <li> <input type="text" class="elem"> </li> </ul> </div> <script> function setPosition(ctrl, pos) { //设置光标位置函数 if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); //创建一个选择区域 range.collapse(true); //将光标移动到选择区域的开始位置 range.moveEnd('character', pos); //改变选择区域结束的位置 range.moveStart('character', pos); //改变选择区域开始的位置 range.select(); //将选择的内容同步到当前的对象 } } $('.elem').on('keypress keyup', function() { if(event.keyCode === 8) return; setPosition(this,0); }); </script> </body> </html>
In addition, the related functions for obtaining the focus position are attached, you may use them
function getPosition(ctrl) { // IE Support var CaretPos = 0; if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); }
Summary:
After setting and getting the text input focus, we can do some other special effects, such as deleting an entire word or variable, etc.
If you have any good ideas for this article, you can @me. I hope this article can help you!