Make a text box that can be filld by JavaScript (full text)

zhaozj2021-02-16  56

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

Ø Supplement on AutoComplete ()

Supplement on the AutoComplete () method, let's take a look at the Auto-completed text box tag (the translator Note: ), the AutoComplete () method will give three parameters: the text box that acts Object OTEXTBOX object, Event object. The calling method is as follows:

Given the key code of the first key of the first button that triggers an onkeypress event (the translator correction: the translator should be used to ensure the characters):

Function AutoComplete (OtExtBox, OEvent, Arrvalues) {switch (OEvent.KeyCode) {...}}

Many buttons need to be masked, such as cursor keys, only need to return to True in the case statements specified below

Function AutoComplete (OTEXTBOX, OEVENT, Arrvalues) {switch (OEvent.Keycode) {Case 38: // á key case 40: // â key case 37: // ß key case 39: // à key case 33: // Page Up Key Case 34: // Page Down Case 36: // End Key Case 13: // Enter Case 9: // Tab Key Case 27: // ESC Key Case 16: / / Shift key case 17: // Ctrl key case 18: // alt key case 20: // Caps lock key case 8: // 退 格 格 Case 46: // delete key Return True; Break; ...}}

Default CASE statement: When the user types a character.

In this case statement, you need to complete the following steps:

1. Replace the selected text with the typed character. (Translator Note: This step does not seem to be necessary)

2. Try to get a matching text when you type text.

3. If found, the text is recommended to enter the text that should be entered and selects the matching text that these users do not need to type.

This step is the most important thing to determine the characters typed by the user (the keycode property (IE) or Charcode property (Mozilla) of the Event object, and use the string.fromcharcode () method to convert the key code into characters, replace this character Currently selected text, then we need to get the length of text in the text box.

Function AutoComplete (OTEXTBOX, OEVENT, Arrvalues) {switch (OEvent.Keycode) {Case 38: // á key case 40: // â key case 37: // ß key case 39: // à key case 33: // Page Up Key Case 34: // Page Down Case 36: // End Key Case 13: // Enter Case 9: // Tab Key Case 27: // ESC Key Case 16: / / Shift key case 17: // CTRL key case 18: // alt key case 20: // CAPS LOCK key case 8: // deleout key Return True; Break; default: TextBoxReplacelectElectr (OTextBox String.fromcharcode: OEvent.Charcode; // Translator Note: This step does not seem to be, so this line will be removed in the sample code ended in the article. Value.Length; ...}} The following uses the autoCompleteMatch () method to find a matching value in the array:

Function AutoComplete (OTEXTBOX, OEVENT, Arrvalues) {switch (OEvent.Keycode) {Case 38: // á key case 40: // â key case 37: // ß key case 39: // à key case 33: // Page Up Key Case 34: // Page Down Case 36: // End Key Case 13: // Enter Case 9: // Tab Key Case 27: // ESC Key Case 16: / / Shift key case 17: // CTRL key case 18: // alt key case 20: // Caps lock key case 8: // delete click 46: // delete key Break; default: TextBoxReplacelectElectr (OTextBox, String. Fromcharcode (isie? OEvent.Keycode: OEvent.charcode); var iln = OTextBox.Value.Length; var smatch = autocompletematch (OTextBox.Value, arrvalues); ...}}

After the request gets a matching value, we need to make sure if this match is really found. Test the smatch value, if it is not null, you need to replace the text in the text box with SMATCH. Then we use the ILEN (the actual text length typed by the user) as an input parameter of the TextBoxSelect () method to select the text (SMATCH) that has been matched. Function AutoComplete (OTEXTBOX, OEVENT, Arrvalues) {switch (OEvent.Keycode) {Case 38: // Up Arrow Case 40: // Down Arrow Case 37: // LEFT ARROW CASE 39: // Right Arrow Case 33: // Page Up Case 34: // Home Case 35: // End Case 13: // ENTER CASE 9: // Tab Case 27: // ESC Case 16: // Shift Case 17: // ctrl case 18: // alt 20 case: // caps lock case 8: // backspace case 46: // delete return true; break; default:? textboxReplaceSelect (oTextbox, String.fromCharCode (isIE oEvent.keyCode: oEvent.charCode ); var iLen = oTextbox.value.length; var sMatch = autocompleteMatch (oTextbox.value, arrValues);! if (sMatch = null) {oTextbox.value = sMatch; textboxSelect (oTextbox, iLen, oTextbox.value.length); } }

After finishing these events, we must add Return False in the processing method, otherwise, the input characters will appear twice.

============================================================================================================================================================================================================= ===================

Ø Sample code (for IE browser):

Description: This sample code may not perform well in Netscape or Oprea browser, and if you have a non-key disk input (mouse copy / paste), it will not be executed.