Home > Developer > JavaScript
The document. selection. createRange () method returns a TextRange object based on the selected text or a ControlRange object based on the selected control.
With execCommand, you can perform many tasks in the HTML editor, such as bold text, italic text, copying, pasting, and hyperlink creation.
Instance 1:
<Textarea cols = 50 rows = 15>
Test content! </Textarea>
<Input type = button value = select a word and click here to see onclick = alert (document. selection. createRange (). text)>
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 can capture the plain text content (excluding HTML tags) in the selected webpage)
If you want to include HTML content, change document.selection.createrange().textto document.selection.createrange().html Text
</Body>
</Html>
Author: ye Gucheng"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
