碼上快樂

相關內容    簡體    繁體

js selection對象使用方法

本文轉載自   查看原文   2015-11-12 16:12   2308    前台javascript

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="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>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS ::Selection的使用方法 CSS的::selection使用方法 JS中對象的 get/set 的使用方法 JS使用方法 數組和對象的使用方法 ndarray對象的使用方法 jsp的C標簽一般使用方法以及js接收servlet中的對象及對象數字 JS數組使用方法 PHP類與對象中的$this使用方法 [C++] 對象指針使用方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM