`

js 中的selection对象使用笔记+光标定位

 
阅读更多

IE:document.selection   

FireFox:window.getSelection()   

document.selection只有IE支持,

window.getSelection()也只有FireFox和   Safari支持,都不是标准语法。
selection   对象  
  -------------------------------------------------------------------------------- 
  
  代表了当前激活选中区,即高亮文本块,和/或文档中用户可执行某些操作的其它元素。 
  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();
        }
    };

 

 

1、获取光标位置

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; 
}

 

2.设置光标位置

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();                      // 选定当前区域
    } 
}

 

3、将光标移动到输入框
ctrl.focus();

 

插入指定元素到指定位置的相关代码:

<!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()" />
    <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>  
</body>
</html>

 

 

简易富文本编辑器:



 

代码:

<!doctype html>
<html>
<head>
<title>selection</title>
</head>
<body>
<input type="text" name="txt" id="txt" />
<input type="button" value="移动光标" onclick="setCaretPosition(2)" />

<p id="p1" contenteditable="true"><b>Hello</b> World</p>
<input type="button" value="insertSpanToFirst" onclick="insertSpan()" />  
<input type="button" value="insertHTMLByJS" onclick="insertHTMLByJS()" />  
<input type="button" value="insertHTMLByCommand" onclick="insertHTMLByCommand()" />  
<input type="button" value="insertImgByCommand" onclick="insertImgByCommand()" />  

<script>
var p1element = document.getElementById('p1');
var cacheRange = null;
p1element.onkeydown = function(e){
    //alert(e.keyCode);
};
p1element.onblur = function(){

    console.log('blur');
    var sel = window.getSelection();
    if(sel.rangeCount){
        cacheRange = sel.getRangeAt(0);
        cacheRange.anchorNode = sel.anchorNode;
        cacheRange.anchorOffset = sel.anchorOffset;
        cacheRange.focusNode = sel.focusNode;
        cacheRange.focusrOffset = sel.focusOffset;
        console.log(sel.anchorNode);
        console.log(sel.anchorOffset);    
    }
    
};
function setCaretPosition(pos){   
    var ctrl = document.getElementById('txt');
    //设置光标位置函数    
    if(ctrl.setSelectionRange) {   
	    ctrl.select();
        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();    
    }    
}  
function insertSpan(){
    var oP1 = document.getElementById("p1");    
    var oHello = oP1.firstChild;    
    var oRange = document.createRange();    
    var oSpan = document.createElement("span");    
    oSpan.style.color = "red";    
    oSpan.appendChild(document.createTextNode("Inserted text"));    
         
    oRange.setStart(oHello, 0);    
    oRange.setEnd(oHello, 0);    
    oRange.insertNode(oSpan);

    var ctrl = document.getElementById('p1');
    //设置光标位置函数    
    if(ctrl.setSelectionRange) {   
        ctrl.select();
        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();    
    } 
}
function insertHTMLByJS(){  
    if(cacheRange === null) return;
    
    var appendEl = document.createElement("span");
    appendEl.textContent = "this is span";
    appendEl.style.color = "blue";

    // var appendEl = document.createElement("span");    
    // appendEl.style.width = "100px";    
    // appendEl.style.height = "60px";    
    // appendEl.style.display = "inline-block";
    // appendEl.style.background = "left top no-repeat url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png)";
    // appendEl.innerHTML = "&nbsp;";
    
    // 方式1,通过新创建的选定区来插入
    // var oRange = document.createRange();         
    // console.log(cacheRange);    
    // oRange.setStart(cacheRange.anchorNode, cacheRange.anchorOffset);    
    // oRange.insertNode(appendEl);
    

    // 方式2,通过缓存之前的选定区来插入  
    var sel = window.getSelection();
    sel.removeAllRanges();
    cacheRange.insertNode(appendEl);

    if( ! sel.isCollapsed ){
        sel.collapseToEnd();
    }
    sel.addRange(cacheRange);
    // 移除光标显示
    document.getElementById('p1').blur();
    sel.removeAllRanges();            
    cacheRange = null;
    
}
function insertHTMLByCommand(){  
    if(cacheRange === null) return;
    
    // 方式2,通过缓存之前的选定区来插入  
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(cacheRange);
    document.execCommand("insertHTML", "false", "<span style='color:#ff3300'><img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=50 height=50 /></span>");
    // 移除光标显示
    document.getElementById('p1').blur();
    sel.removeAllRanges();            
    cacheRange = null;
    
}
function insertImgByCommand(){
    if(cacheRange === null) return;
    
    // 方式2,通过缓存之前的选定区来插入  
    var sel = window.getSelection();
    if( ! sel.isCollapsed ){
        sel.collapseToEnd();
    }
    sel.addRange(cacheRange);
    document.execCommand("insertImage", "false", "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png");
    // 移除光标显示
    document.getElementById('p1').blur();
    sel.removeAllRanges();            
    cacheRange = null;
    
}

</script>
</body>
</html>

 

遇到的坑,优化编辑框点击后有时无法成为编辑状态的问题

优化代码如下:

/* 优化编辑框点击后有时无法成为编辑状态的问题 */
            var editor = document.getElementById('editor_id'), editorTimer = null;
            editor.addEventListener('click', function(){
            	console.log('click');
            	editorTimer = setTimeout(function(){
            		console.log('set focus');
            		var sel,range;
				    if (window.getSelection && document.createRange) {
				      range = document.createRange();
				      range.selectNodeContents(editor);
				      range.collapse(true);
				      range.setEnd(editor, editor.childNodes.length);
				      range.setStart(editor, editor.childNodes.length);
				      sel = window.getSelection();
				      sel.removeAllRanges();
				      sel.addRange(range);
				    } else if (document.body.createTextRange) {
				      range = document.body.createTextRange();
				      range.moveToElementText(editor);
				      range.collapse(true);
				      range.select();
				    }			  
					editor.focus();
            	},300);
            }, false);
			editor.addEventListener('focus', function(){
				console.log('focus');
				clearTimeout(editorTimer);
			}, false);

 

 

(附件index.zip为定位光标的demo)

 

  • 大小: 33.8 KB
分享到:
评论

相关推荐

    STM8文档资料 MCU+Selection+Chart-June+2012

    STM8文档资料 MCU+Selection+Chart-June+2012STM8文档资料 MCU+Selection+Chart-June+2012STM8文档资料 MCU+Selection+Chart-June+2012STM8文档资料 MCU+Selection+Chart-June+2012STM8文档资料 MCU+Selection+Chart...

    Memory Selection Network for Video Propagation+论文笔记

    Memory Selection Network for Video Propagation+论文笔记

    光标定位方法

    在网页开发中,光标定位是一项重要的功能,它涉及到文本编辑器、表单输入等交互式应用。本文将详细介绍不同浏览器环境下实现光标定位的方法。 #### 一、获取光标位置 获取光标位置通常有两种方式:一种是针对IE...

    vsto光标定位

    vsto光标定位 VSTO(Visual Studio Tools for Office)是一种基于Microsoft Office的插件开发技术,用于在Office应用程序中添加自定义功能。下面是关于VSTO光标定位的知识点: 1. HomeKey() 和 EndKey() 方法:这...

    Web APIs 之 Selection对象和Range对象的基本使用

    `Selection`对象存储了用户在网页上选择的文本范围或者光标符号的位置等信息,代表网页中的文本选区,可能横跨多个元素,包含文本、图片等等。文本选区是由用户点击鼠标左键并拖拽鼠标选中页面内容产生的,也就是指...

    JavaScript中textRange对象使用方法小结

    需要注意的是,由于TextRange对象的兼容性和可用性问题,在现代Web开发中,它可能已经被更先进的API如Range或Selection所替代,但仍可在一些老旧浏览器或特定场景下使用。 通过上述知识点,我们可以了解到TextRange...

    Android四大组件(笔记+代码)

    要读取或修改SharedPreferences中的数据,可以使用`getXXX()`方法(如`getString()`, `putString()`等)和`Editor`对象。例如: ```java // 获取数据 String value = sp.getString("key", "默认值"); // 添加数据 ...

    TextRange对象和selection对象实例

    以下是一个简单的示例,演示如何使用`TextRange`和`Selection`对象在网页上查找并替换文本: ```html 文本替换示例 &lt;p&gt;This is an example text to demonstrate the usage of TextRange and Selection ...

    python数据分析(英文版+目录+笔记+随书源码)

    这本书的英文版将通过实例详细讲解这些概念,同时提供的目录可以帮助读者快速定位所需内容,笔记则可能包含作者对关键点的解释和见解,源码则可供读者实践和加深理解。无论是初学者还是经验丰富的数据分析师,这本书...

    Vue中div contenteditable 的光标定位方法

    然而,当我们在Vue组件中处理这种输入时,经常遇到光标定位的问题,尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将详细解释在Vue中如何控制div元素contenteditable的光标定位方法。 1. Vue中div...

    使用JS在textarea在光标处插入内容

    在IT领域,特别是前端开发中,使用JavaScript在`textarea`元素的光标位置插入内容是一项常见且实用的技术。本文将详细解析如何实现这一功能,并深入理解其背后的逻辑与原理。 ### 核心知识点:在`textarea`光标处...

    Javascript 获取光标位置

    这个功能可以帮助开发者精确地控制用户在文本输入框中的光标定位,例如在某些特定字符后插入文本或执行其他操作。 在JavaScript中,获取光标位置主要有两种方式: 1. **基于`input`或`textarea`元素**: 对于`...

    js 获取光标在文本框中的位置

    在JavaScript中,获取光标在文本框(input[type="text"]或textarea)中的位置是一项常见的需求,这在处理用户输入或者实现某些特定功能时非常有用。以下是一些关于如何使用JavaScript来实现这一功能的关键知识点: ...

    通过javascript在光标处插入文本

    而IE浏览器则需要使用`document.selection`对象来获取光标位置。 在我们的示例代码中,我们使用了以下代码来获取光标位置: ```javascript function savePos(textBox){ if(typeof(textBox.selectionStart) == ...

    JTable的setSelectionMode设置为SINGLE_SELECTION后,Ctrl+A按下,焦点自动迁移到最后一行的处理

    主要解决: 把jtable设置为只能选择一行,但是按下Ctrl+A以后,table会自动把选择迁移到最后一行. 如何不让焦点自动迁移?给了个人的一个简单的实现。

    JS获取文本框光标位置、选中起始位置、终止位置、选择内容

    为确保兼容性,可以使用`document.selection`对象的`createRange()`和`select()`方法,但这在非IE浏览器中并不适用。 通过理解和应用这些JavaScript特性,开发者可以创建出更加智能化和用户友好的前端应用。例如,...

    javascript的document对象

    ### JavaScript的Document对象详解 在Web开发中,`Document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并提供了与该文档交互的方法和属性。掌握`Document`对象的基本用法对于进行前端开发至关...

    JavaScript中在光标处插入添加文本标签节点的详细方法

    总结来说,要在JavaScript中实现在光标处插入文本标签节点的功能,我们需要考虑浏览器兼容性问题,并熟练使用Selection和Range对象。通过上述方法,我们可以实现在文档中的任何位置插入文本和节点,这对于提高Web...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    在提供的HTML文件"JS获取文本框光标位置、选中起始位置、终止位置、选择内容.html"中,应该包含了一个示例,演示了如何使用这些方法来实时显示选中区域的信息。你可以打开这个文件,通过实践来更好地理解和应用这些...

Global site tag (gtag.js) - Google Analytics