关于document.selection对象的介绍

最新推荐文章于 2018-04-12 15:34:02 发布

birdwawe

最新推荐文章于 2018-04-12 15:34:02 发布

阅读量4.9k

点赞数

分类专栏： JavaScript 文章标签： javascript function button html 文档脚本

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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='#' οnmοuseup='javascript:showSelectContent(0);'>
      select me. show selecting text

    <br />
    <a href='#' οnmοuseup='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' οnclick='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' οnclick='javascript:selectionContentByScript();' value='select the text box value' />
     </form>
   </body>
</html>

birdwawe

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
关于document.selection对象的介绍

document.selection只有IE支持，　　window.getSelection()也只有FireFox和Safari支持，都不是标准语法。　　selection 对象代表了当前激活选中区，即高亮文本块，或文档中用户可执行某些操作的其它元素。selection 对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。　　用
复制链接

扫一扫