js操作range

本文轉載自查看原文 2013-05-30 20:49 5363

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用 js 的 selection range 操作選擇區域內容和圖片 python的range()和list操作 JS 之DOM range對象 jquery.range.js 滑塊 js中的range。范圍api(一) HTML5--Range對象的基本操作(5) MySQL數據庫分區操作【RANGE】 Excel VBA中對workbook、worksheet、range的選擇和操作 Excel VBA Range單元格操作實例 C# 使用 Index 和 Range 簡化集合操作