Document. Selection

Last Update:2018-12-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Keywords: JS

IE: Document. Selection Firefox: window. getselection () document. Selection only supports IE, and window. getselection () is only supported by Firefox and Safari, neither of which is a standard syntax.
Selection object

--------------------------------------------------------------------------------

Indicates the active selected area, that is, highlight text blocks, and/or other elements in the document that users can perform certain operations.
A selection object is typically used as a user input to identify which part of the document is being processed or output to the user as a result of an operation.

Both the user and script can create the selected area. You can drag a document to create a selected area. The script can create a selected area by calling the select method in the text area or similar objects. To obtain the selected area, apply the selection keyword to the Document Object. To perform operations on the selected area, use the createRange method to create a text area object from the selected area.

A document can only have one selected area at a time. The type of the selected area determines whether it is null or contains text and/or element blocks. Although the empty selection area does not contain any content, you can still use it as the location marker in the document.

A simple example

<HTML>

<Div> select some text here. </Div> <input type = "button" value = "bold" onclick = "javascript: Bold ();"/> </div>

Function bold (){

VaR BO = Document. selection. createRange ();

Bo.exe ccommand ("bold ");

} </SCRIPT>

</Body>

Document. selection. createRange () returns a textrange object based on the current text selection, or returns a controlrange object based on the control selection.

Execcommand can be used in HTML editors, such as bold text, italic text, copying, pasting, and hyperlink creation.

Instance 1:

<Textarea Cols = 50 rows = 15>
Haha. We are new people. Everyone is here to help each other. So that we can make progress and make a lot of money! </Textarea>
<Input type = button value = select a word and click here to see onclick = alert (document. selection. createRange (). Text)>
</Form>

Example 2:

<Body>
<Textarea name = "textfield" Cols = "50" rows = "6"> A text field contains a section of text, when you select a few words and click a button or link, a dialog box is displayed. The information in the dialog box is the selected text.
Which old man can solve it? Please help me more !!! Thank you.
</Textarea>
<Input type = "button" value = "showselection" onclick = "alert (document. selection. createRange (). Text)">
<Input type = "button" value = "showclear" onclick = "alert (document. selection. Clear (). Text)">
<Input type = "button" value = "showtype" onclick = "alert (document. selection. Type)">
<Textarea name = "textfield" Cols = "50" rows = "6" onselect = "alert (document. selection. createRange (). text) "> there is a piece of text in the text field. When you select a few words, click a button or link to bring up a dialog box. The information in the dialog box is the selected text.
Which old man can solve it? Please help me more !!! Thank you.
</Textarea>

</Body>

Example 3: select text in input

<Script language = "JavaScript">
<! --
Function Test2 ()
{
VaR T = Document. getelementbyid ("test ")
VaR o = T. createTextRange ()
Alert (O. Text)
O. movestart ("character", 2)
Alert (O. Text)
O. Select ()
}
// -->
</SCRIPT>
<Input type = 'text' id = 'test' name = 'test'> <input type = button onclick = 'test2 () 'value = 'test' name = 'test3'>
Select the content in textarea and add the effect
<Script language = "JavaScript">
<! --
Function bold (){
Qr = Document. selection. createRange (). text;
If (! Qr | document. selection. createRange (). parentelement (). Name! = 'Description ')
{
TXT = prompt ('text to be made bold .','');
If (txt! = NULL & txt! = '') Document. form1.description. Value + ='' + TXT + '';
}
Else {
Document. selection. createRange (). Text = ''+ document. selection. createRange (). Text + '';
Document. selection. Empty ();
}
}
// -->
</SCRIPT>
<Input type = "button" value = "bold" onclick = "Bold ();"/>
<Textarea name = "Description" style = "width: 436px; Height: 296px"> select me and click bold </textarea>
Example 4: javascript captures the plain text content in the selected webpage.
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> word acquisition with the mouse </title>
<SCRIPT>
Function getsel ()
{
VaR T = Window. getselection? Window. getselection () :( document. getselection? Document. getselection () :( document. selection? Document. selection. createRange (). Text :""))
Document. Forms [0]. selectedtext. value = T;
}
</SCRIPT> <Body onmouseup = "getsel ()">
<Form>
<Textarea name = "selectedtext" rows = "5" Cols = "50"> </textarea>
</Form>
The above Code The plain text content (excluding HTML tags) of the selected webpage can be captured)
If you want to include HTML content, change document.selection.createrange().textto document.selection.createrange().html text
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Document. Selection

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support