关于document.selection对象的介绍

最新推荐文章于 2017-04-09 08:53:50 发布
转载 最新推荐文章于 2017-04-09 08:53:50 发布 · 771 阅读 · 0
文章标签：

#javascript #function #button #html #文档 #脚本

本文介绍了如何使用IE浏览器特有的document.selection对象进行文档选中区的操作，包括加粗选中文本、显示选中内容、清除选中内容及通过脚本选择指定内容。

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>   
【CATIA的二次开发36】对象Selection选择集管理部分方法介绍01
学习共勉：不积跬步，无以至千里； 不积小流，无以成江海。
06-25 1503
在CATIA V5的VBA开发中，Selection对象是用户交互的核心组件，用于管理用户在图形区域或特征树中的选择操作。Selection 对象是 CATIA VBA 中的中央交互枢纽，充当用户界面与程序逻辑之间的桥梁。它代表当前在图形区域或特征树中被选中的元素集合，是自动化操作的基础。
【CATIA的二次开发37】对象Selection选择集管理部分方法介绍02
学习共勉：不积跬步，无以至千里； 不积小流，无以成江海。
06-26 1390
在CATIA V5的VBA开发中，Selection对象是用户交互的核心组件，用于管理用户在图形区域或特征树中的选择操作。Selection 对象是 CATIA VBA 中的中央交互枢纽，充当用户界面与程序逻辑之间的桥梁。它代表当前在图形区域或特征树中被选中的元素集合，是自动化操作的基础。
document.selection.createRange方法与实例
12-11
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个不错   就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮
document.selection
ahstunwy的博客
04-09 827
一、document.selection 介绍  document.selection 表示当前网页中的选中内容。  方法有：      clear　清除选中的内容      empty　取消选中      createRange　返回 TextRange 或 ControlRange 对象      createRangeCollection 不支持  属性有： 
document.execCommand()的用法小结
09-04
`document.execCommand()` 是一个在浏览器的文档对象模型（DOM）中用于执行各种富文本编辑操作的方法。这个方法主要用于在内容可编辑区域（比如 `<contenteditable>` 标签或者富文本编辑器）中进行文本格式化、插入...
关于IE11修改User-agent不再支持document.all等
10-23
本文将详细介绍IE11更新后，关于用户代理字符串（User-agent）更改，以及不再支持document.all等旧特性的情况。 用户代理字符串是用来标识浏览器类型、版本等信息的一种标识，它以特定的格式发送给网站服务器。网站...
Javascript selection的兼容性写法介绍
10-26
document.selection对象通过createRange()方法来获取选中的文本范围，然后通过text属性获取选中文本的字符串。随着IE逐渐向标准靠拢，document.selection对象的支持也逐渐被弃用，但在一些老旧的IE版本中仍有使用。 ...
JavaScript标准Selection操作
weixin_30567225的博客
11-01 482
简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区（即高亮文本）进行操作。 在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，本文讲述的是标准的...
document.selection对象的介绍
专注于 Java 后端架构、微服务、分布式、前端及 AI 领域的技术分享，是开发者获取硬核知识、交流实战经验的专业博客。
10-11 310
关于document.selection对象的介绍 2010-10-27 16:39:57| 分类： JavaScript | 标签： |字号大中小 订阅 . 在网上搜索到的关于document.selection对象的介绍 Post by yaohuaq 2010-02-08 17:51:56 Monday 　　我在看DZeditor的js源代码的时候，有一些对象以及这个对...
document.selection详解
黄泉颤抖
03-11 5790
IE：document.selection 　　FireFox：window.getSelection() 　　document.selection只有IE支持，window.getSelection()也只有FireFox和 Safari支持，都不是标准语法。 selection 对象 ---------------------------------------------------...
IFrame 系列4 ---- document.selection 全方位兼容解析以及TextRange[createTextRange,createRange]对象的深入解析
眷恋天空的驴
03-17 4578
pre{ font-family: courier new!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: courier ne
Document.selection相应练习
创造机会的人是勇者
09-18 1485
IE：document.selection ; FireFox：window.getSelection()  //FF效果还作不出来,1. 一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志2.要获取当前选中区，document对象应用selection关键字。要对选中区执行操作，用crea
document.selection 的作用：获取选中然后进行相关操作
热门推荐
cui_angel的专栏
08-07 3万+
转：http://qingfeng825.iteye.com/blog/259099  一、document.selection 介绍  document.selection 表示当前网页中的选中内容。  方法有：      clear　清除选中的内容      empty　取消选中      createRange　返回 TextRange 或 ControlRa
document对象详解
xing_sky的专栏
10-06 540
document对象详解 以下信息是转载http://www.aaunion.net/cn/blog/more.asp?name=magicmao&id=687 document 文挡对象 - JavaScript脚本语言描述 --------------------------------------------------------------------- 注:页面上
js document.createRange();
最新发布
09-09
`document.createRange()` 方法用于创建一个新的 `Range` 对象。`Range` 对象表示文档中的一个连续的范围，它可以包含节点和部分文本节点。 ### 使用方法 #### 1. 创建 `Range` 对象 ```javascript var range = document.createRange(); ``` #### 2. 设置范围的起始和结束位置 有多种方法可以设置 `Range` 对象的起始和结束位置： - `setStart(node, offset)` 和 `setEnd(node, offset)`：`node` 是起始或结束的节点，`offset` 是在该节点内的偏移量。 ```javascript var parent = document.getElementById('parent'); var child = parent.firstChild; range.setStart(child, 2); range.setEnd(child, 5); ``` - `selectNode(node)`：选择整个节点作为范围。 ```javascript var element = document.getElementById('myElement'); range.selectNode(element); ``` - `selectNodeContents(node)`：选择节点的内容作为范围。 ```javascript var element = document.getElementById('myElement'); range.selectNodeContents(element); ``` #### 3. 应用范围 可以使用 `window.getSelection()` 获取当前的选择对象，然后将 `Range` 对象应用到选择中。 ```javascript var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); ``` ### 应用场景 #### 1. 文本选择 可以使用 `document.createRange()` 来选择页面上的特定文本，例如当用户点击某个按钮时，自动选择一段文本。 ```javascript var button = document.getElementById('selectTextButton'); button.addEventListener('click', function() { var element = document.getElementById('textToSelect'); var range = document.createRange(); range.selectNodeContents(element); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }); ``` #### 2. 复制内容 在复制内容时，可以使用 `Range` 对象来选择要复制的内容。参考之前的引用代码，在复制内容时就用到了 `document.createRange()` 方法： ```javascript var value = "要复制的内容"; var element = document.createElement('SPAN'); element.textContent = value; document.body.appendChild(element); var range = document.createRange(); range.selectNode(element); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); element.remove ? element.remove() : element.removeNode(true); ``` #### 3. 插入内容 可以使用 `Range` 对象来在文档的特定位置插入内容。 ```javascript var parent = document.getElementById('parent'); var child = parent.firstChild; var range = document.createRange(); range.setStart(child, 2); var newNode = document.createTextNode('插入的新内容'); range.insertNode(newNode); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值