js操作range

最新推荐文章于 2024-05-29 17:37:28 发布

dasong1992

最新推荐文章于 2024-05-29 17:37:28 发布

阅读量307

点赞数

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

版权

<!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.

setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection)

select()

void

Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.

转载于:https://www.cnblogs.com/fredwu/archive/2013/05/30/3109111.html

dasong1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作range

<!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:...
复制链接

扫一扫