Copyright Notice: You can reprint anything, please be sure to indicate the original source of the article by hyperlink http://xinyistudio.vicp.net/ and author information and this statement
(This article is suitable for the middle and senior readers)
Translating order:
In order to obtain more information, you will have a lot of text boxes, menu, list boxes in the website page. When the user sees such a wide need to input or select items, it is likely to be tired of this and finally leave you. website.
Using JavaScript for the input text box better design, avoid the above problems as much as possible, I hope this translation can help you in the development and design of the web page, the translation translation error is inevitable, and you will be criticized.
Today, people are most reluctant to face a lot of forms (form), especially those that need to be knocked into characters (that is, the HTML tag we often use, "later is called text box for convenience ).
Microsoft combines the text box that automatically completes the input text box in Outlook - text box checks a small amount of characters entered by the user, then gives a suggested word from a given drop-down list. Similarly, when you start to fill in a URL address in the web address bar, your web browser will recommend a URL drop-down list.
In this tutorial, I use a little JavaScript control, we will create with IE (version 5.5 or higher)
Similar behavior of the Mozilla (version 1.0 or higher) browser.
Ø Simple browser detection
-----------
First, we need to be a browser detection. Here is some simple code (this process can be replaced by the code you have written)
Var isopera = Navigator.UserageRagent.indexof ("Opera")> -1;
Var isie = navigator.UserageRagent.indexof ("msie")> 1 &&! isopra;
Var ismoz = navigator.useragent.indexof ("Mozilla / 5.") == 0 &&! isopera;
This code is obviously not very perfect, but it seems that it is enough for the purpose we have to achieve. Let's start this project.
Ø Select the text box
-----------
The first step in this process is to create a method, which can select the number of text in a text box. I shall
Call this method TextBoxSelect (), it has three parameters, the first parameter is the object that makes this method acts on: OTextBox; the second parameter is not a must, it indicates the selected start position (if this parameter is ignored, Then all texts are selected); the third parameter is the same, and the selected end position is indicated. If a second parameter is provided, the third parameter is not provided, and the text selected in the text box will come from the starting position to the end position.
We write a very easy understanding: If there is only one parameter, then we use the prototype of the text box Select () in this text box to select all the text:
Function TextBoxSelect (OTEXTBOX, ISTART, IEND) {
Switch (arguments.length) {casse 1:
OTextBox.select ();
Break;
...
}
}
Here we use the Switch statement test how many parameter inputs. If there is only one, only OTextBox is
enter. Next, we jump to the beginning of the CASE statement of three parameters (iStart and Ind are selected).
Here, we need to use a browser to detect everything to do, for the IE browser, we will use a text-range object.
Function TextBoxSelect (OTEXTBOX, ISTART, IEND) {
Switch (arguments.length) {
Case 1:
OTextBox.select ();
Break;
Case 3:
IF (isie) {
Var Orange = OtextBox.createTextRange ();
Orange.Movestart ("Character", iStart;
Orange.movend ("Character", -OTextBox.value.Length Iend;
Orange.select ();
} else if (ismoz) {
...
}
}
}
In the bold code, we started from a Text Range object (text-range object for text box object, TextRange sets the start and end coordinates of the text selection range, to adjust this to start coordinates We use movestart () method This method gives two parameters: parameter first is the mobile interval type, the code is used in the code; the parameter 2 is how many intervals are moved, such as moving 5 intervals, then the parameters One "character" learned to move 5 characters, if the parameter is "word", then move 5 words. (Translator Note: See MSDN for details on the method of the TextRange object). Movend () has the same parameters, slightly different is that its second parameter must be negative (translator Note: This parameter can be positive in MSDN2001, may be a positive number, may take into account the problem with the IE version), You can imagine whether you move to the end of the selected text, then return an interval, and then refund two intervals .... In order to obtain the second parameter of Movend (), we will assign a negative value of the length of text in the IEND text box, so if Iend is 8 and 10 characters in the text box, the second parameter becomes -2, select The range will return the end point back to 2 characters. Finally, we call the select () method to highlight the range in the text box.
Complete the above thing for Mozilla browsers is actually easier to do.
The text box object has a setSelectionRange () method, which has two parameters: the start and end position of the selected, you can use iStart and IEND settings directly:
function textboxSelect (oTextbox, iStart, iEnd) {switch (arguments.length) {case 1: oTextbox.select (); break; case 3: if (isIE) {var oRange = oTextbox.createTextRange (); oRange.moveStart ( " Character ", iStart); Orange.Movend (" Character ", -OxtEndBox.value.Length Iend); Orange.Select ();} else if (ismoz) {OTextBox.setSelectionRange (iStart, IEND);}} We returned to the previous CASE statement, ie, only the CASE statement of two parameters (IEND unfameted).
In fact, different from the three parameters is that IEND must be equal to the length of the string in the text box. Implementation like this:
Function TextBoxSelect (OTextBox, iStart, IEND) {switch (arguments.length) {copy 1: OTextBox.select (); break; case 2: ip = OTextBox.value.length; / * Falls through by Case3 Continue processing * / Case 3: if (isie) {var orange = OtextBox.createTextRange (); Orange.MoveStart ("Character", iStart; Orange.Movend ("Character", -OTextBox.Value.Length Iend); Orange.Select () } Else if (ismoz) {OTextBox.SetSelectionRange (iStart, IEND);}}}
In the case 2 above, we did not use the Break statement, just entered the next CASE statement after executing the statement after the CASE 2.
(one two Three)
