js操作range

最新推荐文章于 2022-02-15 17:09:08 发布

dasong1992

最新推荐文章于 2022-02-15 17:09:08 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fredwu/archive/2013/05/30/3109111.html

本文详细介绍了在不同浏览器环境下（如现代浏览器、IE浏览器等），如何通过JavaScript实现文本的精确插入及选中范围的调整，包括创建文本节点、获取选中范围、设置输入框光标位置等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>404</title>
<style>
*,body{margin:0;padding:0;font-family:Microsoft YaHei,Tahoma,Verdana;font-size:12px;color:#535b5e;overflow:hidden;}
</style>
</head>
<body>
<input type="text" id="txt"/>
<div id="editor" style="border: 1px solid #f00; width: 100px; height: 100px" contenteditable="true"></div>
<button οnclick="insertText($('editor'), 'abc');">try</button>
<script>
    function $(id){
        return document.getElementById(id);
    }

    /*function getSelection() {
        var userSelection;
        if (window.getSelection) { //现代浏览器
            userSelection = window.getSelection();
        } else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
            userSelection = document.selection.createRange();
        }
        return userSelection;
    }
    function getRange(selectionObject) {
        var range;
        if (selectionObject.getRangeAt)
            range = selectionObject.getRangeAt(0);
        else { // 较老版本Safari!
            range = document.createRange();
            range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
            range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        }
        return range;
    }*/
    function insertText(obj,str) {

        if (document.selection) {
            obj.focus();

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>404</title>
<style>
*,body{margin:0;padding:0;font-family:Microsoft YaHei,Tahoma,Verdana;font-size:12px;color:#535b5e;overflow:hidden;}
</style>
</head>
<body>
<input type="text" id="txt"/>
<div id="editor" style="border: 1px solid #f00; width: 100px; height: 100px" contenteditable="true"></div>
<button οnclick="insertText($('txt'), 'str');">try</button>
<script>

function $(id){
return document.getElementById(id);
}

function insertText(obj,str) {

if (document.selection) {
obj.focus();
var sel = document.selection.createRange();

sel.text = str;
/*if (obj.createTextRange) {
obj.focus();
obj.createTextRange().text = str;*/
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {

var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;

obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);

cursorPos += str.length;

obj.selectionStart =obj.selectionEnd = cursorPos;
//obj.setSelectionRange(startPos, cursorPos);
//
//obj.focus();
//obj.select();
} else if(window.getSelection) {
var selectObject = getSelection();
obj.focus();
range = selectObject.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode('xyz'));
range.setStart(selectObject.anchorNode, selectObject.focusOffset);
}

}

function moveEnd(obj){

var len = obj.value.length;

obj.focus();

if (document.selection) {

var sel = obj.createTextRange();

sel.moveStart('character',len);

sel.collapse();

sel.select();

} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd === 'number') {

obj.selectionStart = obj.selectionEnd = len;

}
}

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












var userSelection;
if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
    userSelection = document.selection.createRange();
}

var getRangeObject = function(selectionObject) {
    if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
    else { // 较老版本Safari!
        var range = document.createRange();
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        return range;
    }
}
var rangeObject = getRangeObject(userSelection);

var textSelect = function(o, a, b){
	//o是当前对象，例如文本域对象
	//a是起始位置，b是终点位置
	var a = parseInt(a, 10), b = parseInt(b, 10);
	var l = o.value.length;
	if(l){
		//如果非数值，则表示从起始位置选择到结束位置
		if(!a){
			a = 0;	
		}
		if(!b){
			b = l;	
		}
		//如果值超过长度，则就是当前对象值的长度
		if(a > l){
			a = l;	
		}
		if(b > l){
			b = l;	
		}
		//如果为负值，则与长度值相加
		if(a < 0){
			a = l + a;
		}
		if(b < 0){
			b = l + b;	
		}
		if(o.createTextRange){//IE浏览器
			var range = o.createTextRange();         
			range.moveStart("character",-l);              
			range.moveEnd("character",-l);
			range.moveStart("character", a);
			range.moveEnd("character",b);
			range.select();
		}else{
			o.setSelectionRange(a, b);
			o.focus();
		}
	}
};

selectionDirection	DOMString	The direction in which selection occurred. This is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. This can also be "none" if the direction is unknown."
selectionEnd	unsigned long	The index of the end of selected text.
selectionStart	unsigned long	The index of the beginning of selected text.