需求：在彈出的頁面中會有文本框，需要光標聚焦在文本框 並且，
當文本框內有值的情況下，光標顯示在文本框內容末尾。
兼容：IE,FF,Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript 獲取/設置光標位置,兼容Input&&TextArea。</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 32px;
font-family: Verdana, sans-serif;
font-size: 13px;
}
.title {
font-size: 18px;
font-weight: bolder;
margin: 40px 0;
}
.input {
width: 50%;
font-family: Verdana, sans-serif;
font-size: 13px;
text-indent: 2px;
}
</style>
<script>
//獲取光標位置
//單行文本框
function getPositionForInput(ctrl) {
var CaretPos = 0;
if (document.selection) { // IE Support
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
} else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support
CaretPos = ctrl.selectionStart;
}
return (CaretPos);
}
//多行文本框
function getPositionForTextArea(ctrl) {
var CaretPos = 0;
if (document.selection) {// IE Support
ctrl.focus();
var Sel = document.selection.createRange();
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(ctrl);
var CaretPos = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
CaretPos++;
}
} else if (ctrl.selectionStart || ctrl.selectionStart == '0') {// Firefox support
CaretPos = ctrl.selectionStart;
}
return (CaretPos);
}
//設置光標位置函數
function setCursorPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
//test
function process(id, targetId) {
var no = document.getElementById(id).value;
setCursorPosition(document.getElementById(targetId), no);
}
function setautofocus(){
var textarea = document.getElementById("zhangdanNum");
var textarealength = getPositionForTextArea(textarea);
var num = textarea.value;
setCursorPosition(textarea,num.length);
}
</script>
</head>
<body onload="setautofocus()">
<div class="title">JavaScript 獲取/設置光標位置,兼容Input&&TextArea：</div>
<div class="title">單行文本框</div>
<p>
<input class="input" id="textbox" name="textbox"
value="Hi,www.jb51.net!!!" />
</p>
<input type="button"
onclick="alert( getPositionForInput( document.getElementById('textbox') ) )"
value="Get Position"> 輸入位置:
<input type="text" id="no1" size="1" />
<input type="button" onclick="process('no1','textbox');"
value="Set Position">
<div class="title">多行文本框</div>
<textarea id="zhangdanNum" name="zhangdanNum"
style="height: 66px; width: 246px; overflow: hidden">aaaaa</textarea>
<input type="button"
onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )"
value="Get Position"> 輸入位置:
<input type="text" id="no2" size="1" />
<input type="button" onclick="process('no2','zhangdanNum');"
value="Set Position">
</body>
</html>
此方法是是轉載網上，因沒能找到原出處，不能寫明原始地址，望請諒解！