日期:2014-05-16 浏览次数:20460 次
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo : Textarea 元素的光标位置</title>
<style>
#result {
font-size:18px;
line-height:25px;
padding-left:20px;
}
</style>
</head>
<body>
<h1>Textarea 元素的光标位置</h1>
<ul>
<li>获取 Textarea 元素当前的光标位置</li>
<li>设置回原先的 Textarea 元素的光标位置</li>
<li>在 Textarea 元素的光标位置插入文本</li>
</ul>
<form action="#">
<textarea id="test" rows="8" cols="50"></textarea>
<p>
<input type="button" id="get" value="Get Cursor Position"/>
<input type="button" id="set" value="Set Cursor Position"/>
<input type="button" id="add" value="Add Text After Cursor Position"/>
</p>
</form>
<h2>Textarea Range:</h2>
<div id="result"></div>
<script type="text/javascript">
var cursorPosition = {
get: function (textarea) {
var rangeData = {text: "", start: 0, end: 0 };
if (textarea.setSelectionRange) { // W3C
textarea.focus();
rangeData.start= textarea.selectionStart;
rangeData.end = textarea.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
} else if (document.selection) { // IE
textarea.focus();
var i,
oS = document.selection.createRange(),
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
rangeData.text = oS.text;
rangeData.bookmark = oS.getBookmark();
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
if (textarea.value.charAt(i) == '\r' ) {
i ++;
}
}
rangeData.start = i;
rangeData.end = rangeData.text.length + rangeData.start;
}
return rangeData;
},
set: function (textarea, rangeData) {
var oR, start, end;
if(!rangeData) {
alert("You must get cursor position first.")
}
textarea.focus();
if (textarea.setSelectionRange) { // W3C
textarea.setSelectionRange(rangeData.start, rangeData.end);
} else if (textarea.createTextRange) { // IE
oR = textarea.createTextRange();
if(textarea.value.length === rangeData.start) {
oR.collapse(false);
oR.select();
} else {
oR.moveToBookmark(rangeData.bookmark);
oR.select();
}
}
},
add: function (textarea, rangeData, text) {
var oValue, nValue, oR, sR, nStart, nEnd, st;
this.set(textarea, rangeData);
if (textarea.setSelectionRange) { // W3C
oValue = textarea.value;
nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
nStart = nEnd = rangeData.start + text.length;
st = textarea.scrollTop;
textarea.value = nValue;
if(textarea.scrollTop != st) {
textarea.scrollTop = st;
}
textarea.setSelectionRange(nStart, nEnd);
} else i