zoukankan      html  css  js  c++  java

  • js selection对象使用方法

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


    一个简单的例子

    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>   
      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=" 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>  
  • 相关阅读:
    LeetCode:Remove Nth Node From End of List
    链表排序（冒泡、选择、插入、快排、归并、希尔、堆排序）
    快速排序partition过程常见的两种写法+快速排序非递归实现
    LeetCode:Permutations, Permutations II(求全排列)
    LeetCode:3Sum, 3Sum Closest, 4Sum
    LeetCode:Two Sum
    判断一个图是否有环
    c++设计一个无法被继承的类
    设计模式--单例模式
    windows多线程同步互斥--总结
  • 原文地址：https://www.cnblogs.com/zhwl/p/4959380.html
Copyright © 2011-2022 走看看