首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

document.selection对象的引见

2012-08-30 
document.selection对象的介绍关于document.selection对象的介绍2010-10-27 16:39:57|分类: JavaScript |

document.selection对象的介绍
关于document.selection对象的介绍  2010-10-27 16:39:57|  分类: JavaScript |  标签: |字号大中小 订阅 .

在网上搜索到的关于document.selection对象的介绍
Post by yaohuaq  2010-02-08 17:51:56 Monday

  我在看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代码


<html> 
  <head> 
    <title>a test for selection object</title> 
  </head> 
  <body> 
    <script language='javascript'> 
      function test()  
      {  
        var textSelection = document.selection.createRange();  
            textSelection.execCommand('Bold');  
      }  
    </script> 
    <div onmouseup = "javascript:test();">select me.... , I will be bold..</div> 
  </body> 
</html>  





2、查看选择的内容

XML/HTML代码

<html> 
  <head> 
    <title>a test for selection object</title> 
  </head> 
  <body> 
    <script language='javascript'> 
      function showSelectContent(isIncludingHtmlTag)  
      {  
        var textSelection = document.selection.createRange();  
        if (isIncludingHtmlTag)  alert(textSelection.htmlText);  
        else alert(textSelection.text);  
        return false;  
      }  
    </script> 
    <a href='#' onmouseup='javascript:showSelectContent(0);'> 
      select me. show selecting text  
      
    <br /> 
    <a href='#' onmouseup='javascript:showSelectContent(1);'> 
      select me. show selecting htmlText  
      
  </body> 
</html>   

3、清除选中的内容
 
XML/HTML代码 <html> 
   <head> 
     <title>a test for selection object</title> 
   </head> 
   <body> 
     <script language='javascript'> 
       function clearSelectionContent()  
      {  
         document.selection.clear();  
       }  
     </script> 
     <form> 
       <textarea cols=20 rows=5> 
          please select the whole me or parts of me , if you want to delete me.  
       </textarea> 
       <button type='button' onclick='javascript:clearSelectionContent();'> 
         delete selected contents  
       </buton> 
     </form> 
   </body> 
</html>   

4、通过脚本选择内容

XML/HTML代码

<html> 
   <head> 
     <title>a test for selection object</title> 
   </head> 
   <body> 
     <script language='javascript'> 
       function selectionContentByScript()  
       {  
         var t=document.getElementById("test");    
         var o=t.createTextRange();      
             //o.moveStart("character",2);       
             o.select();     
       }  
     </script> 
     <form> 
       <input id='test' type='text' value='will be selected' /> 
       <br /> 
       <input type='button' onclick='javascript:selectionContentByScript();' value='select the text box value' /> 
     </form> 
   </body> 
</html>   

热点排行