Analysis of Implementation Method of Javascript Text Box Script

  • 2021-09-11 19:27:32
  • OfStack

In HTML, there are two ways to represent text boxes: one is to use < input > Element, and the other is to use the < textarea > Gets or sets a multiline text box for the. These two controls are very similar, and most of the time they behave alike. However, there are still one important difference between them.

Relatively speaking, < textarea > Element is always rendered as a 1-line text box. To specify the size of the text box, you can use the rows and cols features. Where the rows attribute specifies the number of character rows in the text box, and the cols attribute specifies the number of character columns in the text box (similar to < inpu > The size property of the element) < input > Elements are different, < textarea > The initial value of must be placed in the < textarea > And < /textarea > Between.

Select text

Both text boxes support the select () method, which is used to select all text in a text box. When the select () method is called, most browsers (except Opera) set the focus to a text box. This method does not accept parameters and can be called at any time.

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

It is a very common practice to select all the text of a text box when it gets focus, especially if the text box contains default values. Because doing so allows users not to delete text one by one.

Select (select) Event

Corresponding to the select () method is an select event. The select event is triggered when the text in the text box is selected. However, when the select event is triggered will vary from browser to browser.

Get the selected text

Although the select event allows us to know when the user selected text, we still don't know what text the user selected. The HTML 5 addresses this problem with a number of extensions to get the selected text more smoothly. The specification takes the approach of adding two attributes: selectionStart and selectionEnd. These two properties hold 0-based numeric values that represent the range of selected text (that is, the offset at the beginning and end of the text selection). Therefore, to get the text selected by the user in the text box, you can use the following code.


function getSelectedText(textbox){
 return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

In IE8 and earlier, there is an document. selection object, which holds the text information selected by the user throughout the document; Compatible with IE8 writing


function getSelectedText(textbox){ 
 if (typeof textbox.selectionStart == "number"){ 
  return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 
 } else if (document.selection){ 
  return document.selection.createRange().text;
 } 
}

Select part of the text

All text boxes now have one setSelectionRange () method except the select () method. This method takes two parameters: the index of the first character to be selected and the index of the character after the last character to be selected (similar to the two parameters of the substring () method).

textbox.value = "Hello world!"
//Select all text
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//Select the first 3 characters
textbox.setSelectionRange(0, 3); //"Hel"
//Select Characters 4 through 6
textbox.setSelectionRange(4, 7); //"o w"

E 8 and earlier support the use of range selection partial text. To select part of the text in a text box, you must first create a range using the createTextRange () method provided by IE on all text boxes and place it in place. Then, use the moveStart () and moveEnd () scope methods to move the scope into place. However, before invoking both methods, you must also use collapse () to collapse the scope to the beginning of the text box. At this point, moveStart () moves the starting and ending points of the range to the same position, simply passing moveEnd () the total number of characters to select. The last step is to select the text using the range's select () method, as shown in the following example.


textbox.value = "Hello world!";
var range = textbox.createTextRange();
// Select All Text  "Hello world!"
range.collapse(true); range.moveStart("character", 0); 
range.moveEnd("character", textbox.value.length); 
range.select();
​
// Before selection  3  Characters  "Hel"
range.collapse(true); 
range.moveStart("character", 0); 
range.moveEnd("character", 3); 
range.select();
​
// Select  4  To the first  6  Characters  "o w"
range.collapse(true); 
range.moveStart("character", 4); 
range.moveEnd("character", 3); 
range.select();

Compatible writing of IE8


function selectText(textbox, startIndex, stopIndex){
 if (textbox.setSelectionRange){ 
  textbox.setSelectionRange(startIndex, stopIndex); 
 } else if (textbox.createTextRange){ 
  var range = textbox.createTextRange(); 
  range.collapse(true); 
  range.moveStart("character", startIndex); 
  range.moveEnd("character", stopIndex - startIndex); 
  range.select();
  }
  textbox.focus();
}

Operating the clipboard

IE is the first browser to support clipboard-related events and access clipboard data through JavaScript. HTML 5 later incorporated the clipboard event into the specification.

beforecopy: Triggered before a copy operation occurs. copy: Triggered when a copy operation occurs. beforecut: Triggered before a cut operation occurs. cut: Triggered when a cut operation occurs. beforepaste: Triggered before a paste operation occurs. paste: Triggered when a paste operation occurs.

Related articles: