Section 15.10. Querying Selected Text


15.10. Querying Selected Text

It is sometimes useful to be able to determine what text the user has selected within a document. This is an area where little standardization exists, but it is possible to query the selected text in all modern browsers. Example 15-12 shows how.

Example 15-12. Querying the currently selected text

 function getSelectedText() {     if (window.getSelection) {         // This technique is the most likely to be standardized.         // getSelection() returns a Selection object, which we do not document.         return window.getSelection().toString();     }     else if (document.getSelection) {         // This is an older, simpler technique that returns a string         return document.getSelection();     }     else if (document.selection) {         // This is the IE-specific technique.         // We do not document the IE selection property or TextRange objects.         return document.selection.createRange().text;     } } 

The code in this example must, to some extent, be taken on faith. The Selection and TextRange objects used in the example are not documented in this book. At the time of this writing, their APIs are simply too complex and nonstandard to cover. Nevertheless, since querying the selected text is a common and relatively simple operation, it is worth illustrating here. You can use it to create bookmarklets (see Section 13.4.1.) that operate on the selected text by looking up a word with a search engine or reference site. The following HTML link, for example, looks up the currently selected text in Wikipedia. When bookmarked, this link and the JavaScript URL it contains become a bookmarklet:

 <a href="javascript:     var q;     if (window.getSelection) q = window.getSelection().toString();     else if (document.getSelection) q = document.getSelection();     else if (document.selection) q = document.selection.createRange().text;     void window.open('http://en.wikipedia.org/wiki/' + q); "> Look Up Selected Text In Wikipedia </a> 

There is one minor incompatibility in Example 15-12. The getSelection() methods of the Window and Document object do not return selected text if it is within an <input> or <textarea> form element: they only return text selected from the body of the document itself. The IE document.selection property, on the other hand, returns selected text from anywhere in the document.

In Firefox, text input elements define selectionStart and selectionEnd properties that you can use to query (or set) the selected text. For example:

 function getTextFieldSelection(e) {      if (e.selectionStart != undefined && e.selectionEnd != undefined) {          var start = e.selectionStart;          var end = e.selectionEnd;          return e.value.substring(start, end);      }      else return "";  // Not supported on this browser } 




JavaScript. The Definitive Guide
JavaScript: The Definitive Guide
ISBN: 0596101996
EAN: 2147483647
Year: 2004
Pages: 767

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