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   方法从选中区创建一个文本区域对象。 
      
      一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。


    一个简单的例子

    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=" 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>  
  • 相关阅读:
    #35 string（缩点+动态规划）
    BZOJ2744 HEOI2012朋友圈（二分图匹配）
    BZOJ2749 HAOI2012外星人（数论）
    BZOJ2743 HEOI2012采花（离线+树状数组）
    洛谷 P3539 [POI2012]ROZ-Fibonacci Representation 解题报告
    关于图论的一些问题模型
    洛谷 P2505 [HAOI2012]道路 解题报告
    ST表
    洛谷 P4754 True Vegetable 解题报告
    洛谷 P2053 [SCOI2007]修车 解题报告
  • 原文地址：https://www.cnblogs.com/mizzle/p/2160632.html
Copyright © 2011-2022 走看看