Js光标对象selection的使用

最新推荐文章于 2024-05-23 11:31:58 发布

IT 哈

最新推荐文章于 2024-05-23 11:31:58 发布

阅读量2.4k

点赞数 2

分类专栏： JavaScript知识点前端

原文链接：https://www.jianshu.com/p/c85958c277b7

版权

前端同时被 2 个专栏收录

268 篇文章 9 订阅

订阅专栏

JavaScript知识点

208 篇文章 8 订阅

订阅专栏

document.selection : IE
window.getSelection() ：Chrome、Safari、FireFox

selection代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。

**** 用户和脚本都可以创建选中区 ****
用户创建选中区的办法是拖曳文档的一部分。
脚本创建选中区的办法是在文本区域或类似对象上调用select方法。
要获取当前选中区，请对document对象应用selection关键字。
要对选中区执行操作，请先用createRange方法从选中区创建一个文本区域对象。

一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。

#以下代码在IE浏览器中生效

// 对选定的文字进行加粗
document.selection.createRange().execCommand("Bold")
//  获取选定的文本
document.selection.createRange().text
// 获取选定的html
document.selection.createRange().htmlText
// 清除选定的内容
document.selection.clear()
// 弹出选择区的类型( None,Text,...)
document.selection.type
 // 获取选取区的文字
var range = document.selection.createRange();  // 创建文本区域对象
range.moveStart("character",2);                          // 选定区起始点向后移动2个字符
range.moveEnd("character",1);                          // 选定区结束点向后移动1个字符
console.log(range.text)

#以下代码在chrome/firefox中生效

window.getSelection().rangeCount // 获取选定区数量
window.getSelection().isCollapsed // 选取定区起始点是否重叠
// 在光标处插入图片
document.execCommand("insertImage","false","https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png")
// 在光标处插入html代码
document.execCommand("insertHTML","false","<br/>")
// 在焦点状态下，移动光标至第一个字符后面
document.getElementById('txt').select();
document.getElementById('txt').setSelectionRange(1,1)
// 复制选定文本到剪切板
document.execCommand("Copy","false",null);

下面举例：

// 插入span到第二个字符后面
var span = document.createElement('span');
span.innerHTML = '[this is add element]';

var sel = window.getSelection();
var startEl = $("#editor_id").next()[0].firstChild, startOffset = 2;
var range = document.createRange();
range.setStart(startEl, startOffset)
range.setEnd(startEl, startOffset);
range.collapse(true);
range.insertNode(span);
sel.removeAllRanges()
sel.addRange(range);

// 保存选定区
function saveSelectionRange()
{
    if( window.getSelection )
    {
        var sel = window.getSelection();
        if( sel.rangeCount > 0 ) return sel.getRangeAt(0);
    }
    else if( document.selection )
    {
        var sel = document.selection;
        return sel.createRange();
    }
    return null;
}

// 载入选定区
function setSelectionRange(savedSel )
{
    if( ! savedSel ) return;
    if( window.getSelection )
    {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(savedSel);
    }
    else if( document.selection )
    {
        savedSel.select();
    }
}

// 获取光标位置
function getCursortPosition (ctrl) 
{
    //获取光标位置函数 
    var CaretPos = 0; 
    // IE Support
    if (document.selection) 
    { 
        ctrl.focus (); // 获取焦点
        var Sel = document.selection.createRange (); // 创建选定区域
        Sel.moveStart('character', -ctrl.value.length); // 移动开始点到最左边位置
        CaretPos = Sel.text.length;                      // 获取当前选定区的文本内容长度
    } 
    // Firefox support 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    {
        CaretPos =ctrl.selectionStart; // 获取选定区的开始点 
    }
    return CaretPos; 
}

// 设置光标位置
function setCaretPosition(ctrl, pos)
{
    //设置光标位置函数 
    if(ctrl.setSelectionRange) 
    {
        ctrl.focus();  // 获取焦点
        ctrl.setSelectionRange(pos,pos);  // 设置选定区的开始和结束点
    } 
    else if (ctrl.createTextRange)
    { 
        var range = ctrl.createTextRange();  // 创建选定区
        range.collapse(true);                // 设置为折叠,即光标起点和结束点重叠在一起
        range.moveEnd('character', pos);     // 移动结束点
        range.moveStart('character', pos);   // 移动开始点
        range.select();                      // 选定当前区域
    } 
}

// 插入指定元素到指定位置
<!doctype html>
<html>
<head>
<title>selection</title>
</head>
<body>
    <p id="p1" contenteditable="true"><b>Hello</b> World</p>  
    <input type="button" value="insertSpan" onclick="insertSpan()" />
</body>
<script>  
function insertSpan() {
    var oP1 = document.getElementById("p1");  
    var oHello = oP1.firstChild.firstChild;  
    var oWorld = oP1.lastChild;  
    var oRange = document.createRange();  
    var oSpan = document.createElement("span");  
    oSpan.style.color = "red";  
    oSpan.appendChild(document.createTextNode("Inserted text"));  
       
    oRange.setStart(oHello, 2);  
    oRange.setEnd(oWorld, 3);  
    oRange.insertNode(oSpan);  
}
</script>
</html>

转自https://www.jianshu.com/p/c85958c277b7

IT 哈

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Js光标对象selection的使用

document.selection : IEwindow.getSelection() ：Chrome、Safari、FireFoxselection代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。**** 用户和脚本都可以创建选中区 ****...
复制链接

扫一扫

专栏目录