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: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 onclick="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 onclick="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.

posted @ 2013-05-30 20:49 wuhao12 阅读(6197) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部