JavaScript | Select and get the effect of multi-line text box contents

JavaScript | Select and get the effect of multi-line text box contents

The main content of this article

1. Target Effect Display

2. Knowledge of basic attributes involved

3. Core function-selection of relevant knowledge

1. Target Effect Display

As above, the main implementation is the user to customize the selection of any content in a multiline text box, and then put the obtained content into the text under the button as the content of the storage, and finally by clicking the button to achieve the content settings, so that the user needs of the information from a large number of content text to get out. To achieve this kind of text operation function, it is necessary to consider the various aspects of the properties and browser compatibility issues, next come up to see it ~ ~ ~

2. Knowledge of basic attributes involved

2.1 innerHTML Properties

innerHTML is an attribute that has bidirectional functionality in JS that can get the contents of an object while inserting content into an object. So when using JS to process content, it is usually necessary to use the tag's innerHTML property to modify the contents of the tag element. The content is assigned to this attribute. As follows:

1. for (var i = 0; i < arr.length; i++) {

2. Populate the text selected by the user

3. con.innerhtml + = ' <p> ' + arr[i] + ' </p> ';

4. };

2.2 String method

The string method is often used in the JS underlying operation of a series of methods, the main effect is the use of the split () method, this method is mainly used to achieve the cutting of the string, the result is a string array, which is based on the parameters in the method, the parameter marker is what, then follow this mark to cut. The following is the writing of a string cut based on the escape character "\ n":

1. var arr = nowText.innerHTML.split (' \ n ');

3. Core function-selection of relevant knowledge

This effect is the processing of text content, which for different browsers there are different compatibility processing, the specific performance in Google, Firefox and IE browser to achieve the same function using different methods. The GetSelection () method is required for users to select text in Google and Mozilla Firefox, while IE is the selection () method. Its specific usage and differences to see it together ~

3.1 GetSelection () method

The GetSelection () method returns a Selection object that represents the text content selected by the user, supported by Google, Firefox, Apple, and other browsers, as follows:

1. if (window.getselection) {

2. Text = Window.getselection ();

3. } else {

4. if (document.getselection) {

5. Text = Document.getselection ();

6. } else {

7. Text = "";

8. }

9. }

3.2 Selection Object

The Selection object represents the selected area, which is the element and content for which the user can perform certain actions in the document. Both the user and JS can create a selection, and the user creates a selection by selecting a part of the document; JS creates a selection to invoke the Selection object in a text field. In IE, you need to use the Createrange () method to create a text field object when you want to manipulate the selected area, using the following:

1. if (document.selection) {

2. Document.selection.createRange (). HTMLText get content that contains HTML

3. Text = Document.selection.createRange (). HTMLText;

4. } else {

5. Text = "";

6. }

Summarize

Text manipulation is a complex processing operation in front-end development, the reason is that each browser has a compatibility problem, so in a variety of usage scenarios need to consider the method of compatible operations. The above is mainly for you to explain the Selection object for the page text content of the selected operation.

JavaScript | Select and get the effect of multi-line text box contents