在网上搜索到的关于document.selection对象的介绍
Post by
yaohuaq
  2010-02-08 17:51:56 Monday Tags:document,selection,对象
我在看DZeditor的js源代码的时候，有一些对象以及这个对象的属性的一些方法从未接触过，比如说execCommand与queryCommandState方法，还有document.selection对象，对它们很陌生，在网上搜索它们的相关资料，也比较难！
我在w3school DOM版块也没有找到它们的相关信息，后来发现它们不是w3c的标准，只是一些主流浏览器提供的一些API，难怪会找不到！我搜索了很久才找到相关的文章，因为原文有一些错误，或者感觉语句不通，所以我自己修改了一下，关于介绍selection对象的原文地址：http://ablya.javaeye.com/blog/470623 ， 下面是我自己的语言组织的。
  document.selection只有IE支持，window.getSelection()也只有FireFox和Safari支持，都不是标准语法。
selection 对象代表了当前激活选中区，即高亮文本块，或文档中用户可执行某些操作的其它元素。selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。  
  用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对document对象应用selection关键字。要对选中区执行操作，请先用createRange方法从选中区创建一个文本区域对象。document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。selection.type选中内容的类型。 //document.selection.createRange().parentElement().name。 
  一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

1、一个简单的例子（对选中的文本执行加粗命令 , 该脚本只在IE下有效） 
XML/HTML代码
  1. <html>  
  2.   <head>  
  3.     <title>a test for selection object</title>  
  4.   </head>  
  5.   <body>  
  6.     <script language='javascript'>  
  7.       function test()   
  8.       {   
  9.         var textSelection = document.selection.createRange();   
  10.             textSelection.execCommand('Bold');   
  11.       }   
  12.     </script>  
  13.     <div onmouseup = "javascript:test();">select me.... , I will be bold..</div>  
  14.   </body>  
  15. </html>  

2、查看选择的内容
XML/HTML代码
  1. <html>  
  2.   <head>  
  3.     <title>a test for selection object</title>  
  4.   </head>  
  5.   <body>  
  6.     <script language='javascript'>  
  7.       function showSelectContent(isIncludingHtmlTag)   
  8.       {   
  9.         var textSelection = document.selection.createRange();   
  10.         if (isIncludingHtmlTag)  alert(textSelection.htmlText);   
  11.         else alert(textSelection.text);   
  12.         return false;   
  13.       }   
  14.     </script>  
  15.     <a href='#' onmouseup='javascript:showSelectContent(0);'>  
  16.       select me. show selecting text   
  17.        
  18.     <br />  
  19.     <a href='#' onmouseup='javascript:showSelectContent(1);'>  
  20.       select me. show selecting htmlText   
  21.        
  22.   </body>  
  23. </html>  

3、清除选中的内容
 
XML/HTML代码
  1. <html>  
  2.    <head>  
  3.      <title>a test for selection object</title>  
  4.    </head>  
  5.    <body>  
  6.      <script language='javascript'>  
  7.        function clearSelectionContent()   
  8.       {   
  9.          document.selection.clear();   
  10.        }   
  11.      </script>  
  12.      <form>  
  13.        <textarea cols=20 rows=5>  
  14.           please select the whole me or parts of me , if you want to delete me.   
  15.        </textarea>  
  16.        <button type='button' onclick='javascript:clearSelectionContent();'>  
  17.          delete selected contents   
  18.        </buton>  
  19.      </form>  
  20.    </body>  
  21.  </html>  

4、通过脚本选择内容
XML/HTML代码
  1. <html>  
  2.    <head>  
  3.      <title>a test for selection object</title>  
  4.    </head>  
  5.    <body>  
  6.      <script language='javascript'>  
  7.        function selectionContentByScript()   
  8.        {   
  9.          var t=document.getElementById("test");     
  10.          var o=t.createTextRange();       
  11.              //o.moveStart("character",2);        
  12.              o.select();      
  13.        }   
  14.      </script>  
  15.      <form>  
  16.        <input id='test' type='text' value='will be selected' />  
  17.        <br />  
  18.        <input type='button' onclick='javascript:selectionContentByScript();' value='select the text box value' />  
  19.      </form>  
  20.    </body>  
  21.  </html>  
评论:
发表评论:
姓名：
联系方法:(选填)
评论内容:
个人信息
迎接
昵称:C7_yaohuaq
QQ:88523499
Email:c77cc#vip.qq.com
居住地:北京 海淀
星座:天蝎
毕业院校:广西民族大学
工作点:喜讯无限
最新评论