Using Text Ranges to Update Part of a Page


Internet Explorer supports text ranges, which you can use to replace text in Web pages. A full discussion of text ranges is beyond the scope of this book, but here’s a starter example, textranges.html, which appears in Figure 11.20.

image from book
Figure 11.20: The textranges.html application

When you click the button, the text in the page is selected and rewritten, as shown in Figure 11.21.

image from book
Figure 11.21: Replacing text in the textranges.html application

This example starts with a button connected to a function named replaceText:

 <body>     <center>         <h1>            Using TextRanges         </h1>     </center>     <input type="button" value="Click me"       onclick="replaceText()">     <br>     <br>     .     .     . </body>

and you can also add a <div> element with the ID div1:

 <body>     <center>         <h1>            Using TextRanges         </h1>     </center>     <input type="button" value="Click me"       onclick="replaceText()">     <br>     <br>     <div >         Click the button to replace this text.     </div> </body>

When the user clicks the button, the replaceText function is called, which starts by creating a text range that can select text:

 <head>     <title>         Using TextRanges     </title>     <script language="JavaScript">         function replaceText()         {             var range = document.body.createTextRange();             .             .             .         }     </script> </head>

Next, you create an object corresponding to the <div> element:

 <head>     <title>         Using TextRanges     </title>     <script language="JavaScript">         function replaceText()         {             var range = document.body.createTextRange();             var div = document.getElementById("div1");             .             .             .         }     </script> </head>

and then you can move your text range to encompass the <div> element with the range’s moveToElementText method:

 <head>     <title>         Using TextRanges     </title>     <script language="JavaScript">         function replaceText()         {             var range = document.body.createTextRange();             var div = document.getElementById("div1");             range.moveToElementText(div);             .             .             .         }     </script> </head>

Now that you’ve enclosed the <div> element inside a text range, you can use the range’s pasteHTML method to overwrite the <div> element’s HTML like this:

 <head>     <title>         Using TextRanges     </title>     <script language="JavaScript">         function replaceText()         {             var range = document.body.createTextRange();             var div = document.getElementById("div1");             range.moveToElementText(div);             range.pasteHTML("Here is the new text.");         }     </script> </head>

Besides pasting HTML into a text range, you can also move them around a Web page. The major drawback, of course, is that text ranges are supported in Internet Explorer only.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net