The so-called text box flashback input means that the focus of the input box is always at the beginning. As shown in the figure, when I enter 123456789, the 987654321 is displayed on the input box.
Why do you want to make this demo? It is because I encountered it in a project. The project requirements are two input boxes, one is input in a positive order and the other is input in a flashback. Below I will write down the implementation ideas and code.
Text flashback input:
As long as we ensure that the focus of the input box is always in the first place, we can achieve that every time we input it, that is, recurrence.
Code:
function setPosition(ctrl, pos) { //Set the cursor position function if (ctrl.setSelectionRange) {ctrl.focus();ctrl.setSelectionRange(pos, pos);} else if (ctrl.createTextRange) {var range = ctrl.createTextRange(); //Create a selection area range.collapse(true); //Move the cursor to the starting position of the selection area range.moveEnd('character', pos); //Change the position at which the selection area ends range.moveStart('character', pos); //Change the position at which the selection area starts range.select(); //Synch the selected content to the current object}}As long as we set the parameter pos to 0, it will be fine.
Below 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 style=""><ul><li><input type="text"></li><li><input type="text"></li><li><input type="text"></li></ul></div><script>function setPosition(ctrl, pos) { //Set the cursor position function if (ctrl.setSelectionRange) {ctrl.focus();ctrl.setSelectionRange(pos, pos);} else if (ctrl.createTextRange) {var range = ctrl.createTextRange(); //Create a selection area range.collapse(true); //Move the cursor to the starting position of the selection area range.moveEnd('character', pos); //Change the end position of the selection area range.moveStart('character', pos); //Change the starting position of the selection area range.select(); //Sync the selected content to the current object}}$('.elem').on('keypress keyup', function() {if(event.keyCode === 8)return;setPosition(this,0);});</script></body></html>In addition, you may use the relevant function to obtain the focus position.
function getPosition(ctrl) {// IE Supportvar CaretPos = 0; if (document.selection) {ctrl.focus();var Sel = document.selection.createRange();Sel.moveStart('character', -ctrl.value.length);CaretPos = Sel.text.length;}// Firefox supportelse if (ctrl.selectionStart || ctrl.selectionStart == '0')CaretPos = ctrl.selectionStart;return (CaretPos);}Summarize:
By 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 good ideas about this article, you can @me, I hope this article can help you!