The so-called text box flashback input is the point where the input box's focus always starts at the beginning, as shown in the figure, when I enter 123456789, the input box shows 987654321.
Why do you want to do this demo? Because it was encountered in the project, the project requirement is two input boxes, one positive sequence input and another flashback input. Below I write the idea and code of realization.
Text Flashback input:
As long as we ensure that the input box focus is always in the first place, so that we can achieve every time we enter the front, that is, flashbacks
Code:
function SetPosition (CTRL, POS) {//SET cursor position functions
if (ctrl.setselectionrange) {
ctrl.focus ();
Ctrl.setselectionrange (POS, POS);
} else if (ctrl.createtextrange) {
var range = Ctrl.createtextrange ();//Create a Select area
range.collapse (true); Move the cursor to the beginning of the selection
range.moveend (' character ', POS);//Change the location at the end of the selection
Range.movestart (' character ', POS); Change the location at which the selection begins
range.select ();//sync selected content to current object
}
As long as we set the parameter pos to be 0.
Here is a complete demo that implements the normal deletion and flashback input.
In addition to the related function of getting focus position, you may use the
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);
}
Summarize:
With the setting and getting the text input focus, we can do some other special effects, such as deleting an entire word or variable, and so on.
If you have a good idea about this article, can @me, hope this article can help you!