Shulou(Shulou.com)06/02 Report--

I hope you can read it carefully and be able to achieve something!

Select and read the text content of non-form elements on the page

Moving forward, we can also be responsible for dynamically selecting and then retrieving the content we want on the page, such as the content of a particular DIV, rather than simply retrieving the content selected by the user. This is very different from simply using the element innerHTML or innerText attribute to get its content; we want to actually select the content through JavaScript, thus opening other possible actions, such as copying it to the user's clipboard.

To select the text content of a non-form field element, we first create a new Range object and set it to contain the desired element. Then, add the range to the Selection object to actually select it. Let's see how it works, and this function dynamically selects the text content of the element based on the element passed in:

one

two

three

four

five

six

seven

Function selectElementText (el) {

Var range = document.createRange () / / create a new scope object

Range.selectNodeContents (el) / / sets the range to contain the required element text

Var selection = window.getSelection () / / get the Selection object from the text selected by the current user

Selection.removeAllRanges () / / deselect any text selected by the user (if any)

Selection.addRange (range) / / add a scope to the Selection object to select it

}

To create an object to add scope, we use it; because by default this method returns the text (if any) selected by the user, we immediately call its method to clear the tablet. Then we start to create a blank range, zero the contents of the element for selection, and then add the range to the object for selection. Selection window.getSelection () removeAllRanges () range .selectNodeContents () Selection

Once we have selected the text we want to read, we turn to our previous getSelectionText () method to read the contents of the selected element, such as:

Demo:

"my mother always said, 'Life is like a box of chocolates. You never know what you're gonna get.'" -Forrest

Select and retrieve text

Code:

one

two

three

four

Var para = document.getElementById ('para')

SelectElementText (para) / / Select the element text we want to read

Var paratext = getSelectionText () / / read user selection

Alert (paratext) / / remind "my mother always says..."

Select and read the contents of form elements, such as INPUT text or TEXTAREA

In order to select field values related to reading the table, such as INPUT text and TEXTAREA, this process is different from selecting regular text. Most of us already know the entire value of the selected form field, and we can use inputElement.select () * and retrieve that value to probe inputElement.value. However, you can also programmatically select a portion of the field value and get that value. Let's see how to do this.

-programmatically select a portion of the field value

To dynamically select INPUT text or part of a TEXTAREA element, use to indicate the starting and ending indexes that you want to select in the field: formElement.setSelectionRange ()

one

two

three

four

Var emailfield = document.getElementById ("email")

Emailfield.focus () / / this is required in most browsers before setSelectionRange () works

Emailfield.setSelectionRange (0d5) / / Select the first five characters of the input field

Emailfield.setSelectionRange (5 minutes emailfield. Value.length) / / Select the fifth to last character of the input field

Note that the second parameter, formElement.setSelectionRange (), should be the index of the end character to be selected plus 1, so to select the first five characters of the form field, the end index value to enter should be 5 or 4 (index of the fifth character) plus 1.

Demo:

Select the first five characters, select the fifth to the last character.

* Note: on iOS devices (starting with iOS9), using inputElement.select () to quickly select the contents of all form elements doesn't seem to work. However, this is true with inputElement.setSelectionRange (). Therefore, select the text of all form fields across browsers and devices as follows:

InputElement.setSelectionRange (0, inputElement.value.length)

-read the selected portion of the field value

No matter how you select a portion of the value of a form field, whether by using setSelectionRange () to dynamically select that part, or by the user dragging his / her mouse to make a user-defined selection, the selection is retrieved by getting the start and end characters of the exponential selection and then using them to extract the part from the value of the form field. We can use the following methods to get the index selected by the activity:

FormElement.selectionStart: the index of the first character of the selected text. If no text is selected, it contains the index of the characters after the input cursor.

FormElement.selectionEnd: the index of the last character of the selected text. If no text is selected, it contains the index of the characters after the input cursor.

The above properties are particularly useful when getting any user-selected text from a form field, where the selected index is not yet known. The following demonstration responds to what the user selects from the TEXTAREA using the following properties:

Demo (select some text in textarea):

Output:

Code:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

Here are some words.

Of

Var quotearea = document.getElementById ('quote')

Var output = document.getElementById ('output')

Quotearea.addEventListener ('mouseup', function () {

If (this.selectionStart! = this.selectionEnd) {/ / check the user has selected some text inside field

Var selectedtext = this.value.substring (this.selectionStart, this.selectionEnd)

Output [XSS _ clean] = selectedtext

}

}, false)

We mouseup attach a "" event to the target TEXTAREA to listen when the user places the mouse in it. Inside the event handler, to detect what the user has selected, first, we check to see if the TEXTAREA selectionStart and selectionEnd properties contain different values-if they are the same, nothing is selected, in which case they all point to the character behind the input cursor. If their values are different, we continue to map the index of the selected text to the value of the form field value to derive the actual selected text formElement.value.substring ().

This is the end of "how to use JavaScript to read the selected text and copy it to the clipboard". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.