text box Flashback input Let the input box focus always in the first position _javascript tips

Source: Internet
Author: User

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.

<! DOCTYPE html>  

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.