document.selection.createRange()

最新推荐文章于 2019-09-29 16:30:25 发布
转载 最新推荐文章于 2019-09-29 16:30:25 发布 · 333 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bullfighter/archive/2011/09/22/2185203.html
文章标签：

#xhtml #javascript #ViewUI

本文介绍了如何在HTML编辑器中利用document.selection.createRange()方法实现文字的加粗、显示选定文字等功能，并通过三个实例展示了该方法的具体应用。

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

举例1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>document.selection 的 createRange</title>
</head>
<body>

<div>请选中这里的部分文字。</div>
<div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>
<script type="text/javascript" language="javascript">
<!--
function Bold()
{
    var r = document.selection.createRange();
    r.execCommand("Bold");
}
-->
</script>

</body>
</html>

 

举例2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
var selection;
function alertSelection()
{
    //***** IE下面
    try {
        selection=document.selection.createRange().text;
    }
    //***** 其他浏览器下面
    catch(e) {
        selection=document.getSelection();
    }
    if(selection!="")
    {
        alert(selection);
        selection="";
    }
}
</script>
</head>
<body>
<ul>
    <li onmouseup="alertSelection()">中华人民共和国</li>
    <li onmouseup="alertSelection()">美利坚合众国</li>
    <li onmouseup="alertSelection()">大不列颠联合王国</li>
</ul>
</body>
</html>

举例3：（参考）有错误

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function alertSelection(Xelement)
{

    try {
        alert(document.selection.createRange().text);
    }
    catch(e) {
        var textarea1=document.getElementById("textarea1");
        alert(textarea1.value.substring(textarea1.selectionStart,textarea1.selectionEnd));
    }
}
</script>
</head>
<body>
<ul>
    <li onmousedown="alertSelection(this)">中华人民共和国</li>
    <li onmousedown="alertSelection(this)">美利坚合众国</li>
    <li onmousedown="alertSelection(this)">大不列颠联合王国</li>
</ul>
<textarea id="textarea1"></textarea>
</body>
</html>



 

转载于:https://www.cnblogs.com/bullfighter/archive/2011/09/22/2185203.html

document.execCommand(‘copy‘) 复制微信号或其他文本
idweiwei的博客
09-20 561
照例直接上使用代码 HTML <!-- 复制目标 --> <span id="copyDom" class="wx_hm" style="display: none">VikF1997</span> <!-- 事件dom --> <b oncopy="myFunction2()">点我复制</span> JS /* 长按复制代码 */ function copyArticle(event) {
DHTML之-----document.selection 的 createRange
zhouzilong502086525的专栏
02-16 845
DHTML之-----document.selection 的 createRange<br />一、document.selection 介绍<br />document.selection 表示当前网页中的选中内容。<br />方法有：clear　清除选中的内容 empty　取消选中 createRange　返回 TextRange 或 ControlRange 对象 createRangeCollection 不支持<br />属性有：<br /> type　选中内容的类型 typeDetail 不支
document.selection.createRange方法
热门推荐
rfb0204421的专栏
04-01 1万+
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 实例一：哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！   实例
document.selection.createRange
天使的天空
05-19 2144
最近在做编辑器，需要对编辑器研究下，发现document.selection.createRange这个挺有用的。document.selection.createRange方法：document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 exec
document.selection.createRange方法与实例
12-11
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个不错   就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮
document.selection.createRange方法----获取选择对象文本
乐在克里特
03-01 1827
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。 配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。   实例一： &lt;from&gt; &lt;textarea cols=50 rows=15&gt; ...
js document.createRange();
最新发布
09-09
`document.createRange()` 方法用于创建一个新的 `Range` 对象。`Range` 对象表示文档中的一个连续的范围，它可以包含节点和部分文本节点。 ### 使用方法 #### 1. 创建 `Range` 对象 ```javascript var range = ...
const range = document.createRange(); range.selectNode(document.getElementById('targetCode')); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy');
05-07
我记得，使用document.createRange()可以创建一个范围对象，然后选择特定的元素内容。然后通过selection对象将其添加到选区，最后执行copy命令。这个过程需要获取窗口的选区，可能涉及getSelection()方法。 接下来...
document.execCommand怎么替代
01-03
document.selection.createRange().pasteHTML(html); } } ``` 这种方法不仅提供了更好的跨平台支持，而且允许更加精细地控制编辑行为，比如可以更容易地集成撤销/重做机制[^2]。 #### 利用第三方库简化开发过程 ...
document.selection 的 createRange()方法汇总
DaiDaiLiu的专栏
01-24 3148
document.selection 的 createRange INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} 实例一
DOM-document.selection.createRange方法和TextRange对象
Ned_mahone的博客
04-07 3826
转自：http://blog.163.com/ruby_study/blog/static/238680065201611303416839/IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找。注：此对象应用于IE9版本以下，对于IE10及IE11，分别使用document.getSelection和window.getSelection来...
document.selection.createRange() （转）
weixin_30859423的博客
02-02 150
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。举例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit...
selection.createRange().pasteHTML(strHTML)连讲
张国富的专栏
08-20 997
<br />selection是文档中被选择的所有对象   <br /><br />createRange()是将创建一个textRange()对象，就是文档中被选择的所有文本都放到这个对象里了   <br /><br />pasteHTML()将被选中的文本清空，然后将给定的HTML串粘贴进来<br /> <br />例子：<Script Language="JavaScript"><br />        function addLink(){<br />           var oRange =
ie9下在iframe中使用document.selection.createRange().text获取的值为空的解决办法
鲁小班的博客
09-29 1201
最近公司之前的用iframe框架写的一个老系统要求实现一个身份证上传并且预览的需求，兼容到ie9；由于这个项目保密，所以我这边仿照写了个demo 效果图 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
document中Selection、Range的介绍
08-26 677
Selection对象：      代表窗口或窗格中的当前所选内容。所选内容代表文档中选定（或突出显示）的区域，如果文档中没有选定任何内容，则代表插入点。每个文档窗格只能有一个 Selection 对象，并且在整个应用程序中只能有一个活动的 Selection 对象。 Text 属性是 Selection 对象的默认属性。使用此属性可设置或返回当前所选内容中的文本。 由于 Range 对象与
document.getSelection,document.selection.createRange
cvb114215的专栏
09-28 2764
function getSel(){      var txt = ;      var foundIn = ;      if(window.getSelection)      {          txt = window.getSelection();          foundIn = window.getSelection();      }else if(documen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值