js selection对象使用方法

IE：document.selection 　　FireFox：window.getSelection() 　　document.selection只有IE支持，window.getSelection()也只有FireFox和   Safari支持，都不是标准语法。
selection   对象 
  
  -------------------------------------------------------------------------------- 
  
  代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。 
  selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。 
  
  用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。 
  
  一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。


一个简单的例子

Java代码  收藏代码
  1. <html><head><title>document.selection.createRange例子</title></head><body>   
  2.   
  3. <div>请选中这里的部分文字。</div><div><input type="button" value="加粗" onclick="javascript :Bold();" /></div>   
  4.   
  5. <script  language="javascript">   
  6.   
  7. function Bold(){   
  8.   
  9. var bo = document.selection.createRange();   
  10.   
  11. bo.execCommand("Bold");   
  12.   
  13. }</script>   
  14.   
  15. </body>  
  16. </html>   


Java代码  收藏代码
  1. document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。   
  2.   
  3. 配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。   
  4.   
  5. 实例一：   
  6.   
  7. <textarea cols=50 rows=15>   
  8. 哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea>   
  9. <input type=button value=选择字后点击我看看 onclick=alert(document.selection.createRange().text)>   
  10. </form>   
  11.   
  12. 实例二：   
  13.   
  14. <body>   
  15. <textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字   
  16. 哪位老大能解决的呀?请多多帮忙!!!谢谢   
  17. </textarea>   
  18. <input type="button" value="showSelection" onclick="alert(document.selection.createRange().text)">   
  19. <input type="button" value="showclear" onclick="alert(document.selection.clear().text)">   
  20. <input type="button" value="showtype" onclick="alert(document.selection.type)">   
  21. <textarea name="textfield" cols="50" rows="6" onselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字   
  22. 哪位老大能解决的呀?请多多帮忙!!!谢谢   
  23. </textarea>   
  24.   
  25. </body>   
  26.   
  27. 实例三：选中Input中的文本   
  28.   
  29. <SCRIPT LANGUAGE="JavaScript">   
  30. <!--   
  31. function test2()   
  32. {   
  33. var t=document.getElementById("test")   
  34. var o=t.createTextRange()   
  35. alert(o.text)   
  36. o.moveStart("character",2)   
  37. alert(o.text)   
  38. o.select()   
  39. }   
  40. //-->   
  41. </SCRIPT>   
  42. <input type='text' id='test' name='test'><input type=button onclick='test2()' value='test' name='test3'>   
  43. 对textarea中的内容，进行选中后，加效果   
  44. <script language="JavaScript">   
  45. <!--   
  46. function bold(){   
  47. Qr=document.selection.createRange().text;   
  48. if(!Qr || document.selection.createRange().parentElement().name!='description')   
  49. {   
  50. txt=prompt('Text to be made BOLD.','');   
  51. if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';   
  52. }   
  53. else{   
  54. document.selection.createRange().text=''+document.selection.createRange().text+'';   
  55. document.selection.empty();   
  56. }   
  57. }   
  58. //-->   
  59. </script>   
  60. <input type="button" value="加粗" onclick="bold();" />   
  61. <textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea>   
  62. 实例四：javascript捕获到选中的网页中的纯文本内容   
  63. <html>   
  64. <head>   
  65. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  66. <title>鼠标取词</title>   
  67. <script>   
  68. function getSel()   
  69. {   
  70. var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))   
  71. document.forms[0].selectedtext.value = t;   
  72. }   
  73. </script></head>   
  74. <body onmouseup="getSel()">   
  75. <form>   
  76. <textarea name="selectedtext" rows="5" cols="50"></textarea>   
  77. </form>   
  78. 以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)   
  79. 如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText   
  80. </body>   
  81. </html>  
posted @ 2011-08-31 13:23  $雨$  阅读(18084)  评论(0)  编辑  收藏  举报