您的位置：首页 > Web前端 > JavaScript

js获取textarea或者input光标位置，控制光标位置

2017-02-20 23:09 531 查看

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<textarea name="text" rows="12" cols="28" id="select"></textarea>
<!--<input type="text" name="select" id="select" />-->
<label for="number">设置值</label>
<input type="text" id="number" style="width: 28px;" />
<button type="button" id="button0">ClickMe</button>
<button type="button" id="button1">ClickMe2</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/**
* 获得光标位置兼容IE/FF
*
例：
var obj = document.getElementById("tx1");
var pos = getCaretPosition(obj);
alert("--"+pos);
*/
function getCaretPosition(obj) {
var result = 0;
if(obj.selectionStart >= 0) { //IE以外
result = obj.selectionStart;
} else { //IE
try {
var rng;
if(obj.tagName == "textarea") { //TEXTAREA
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x, event.y);
} else { //Text
rng = document.selection.createRange();
}
rng.moveStart("character", -event.srcElement.value.length);
result = rng.text.length;
} catch(e) {
throw new Error(10, "asdasdasd");
}
}
return result;
}
var str = '1234567890';
str = str.substring(0, str.length - 1);
console.log(str)
/**
* 设置光标位置兼容IE/FF
* @param tObj
* @param sPos
*
例：
var obj =document.getElementById("tx1");
var sPos = obj.value.length-1;
setCaretPosition(obj, sPos);
*/
function setCaretPosition(tObj, sPos) {
if(tObj && sPos) {
if(tObj.setSelectionRange) {
setTimeout(function() {
tObj.setSelectionRange(sPos, sPos);
tObj.focus();
}, 0);
} else if(tObj.createTextRange) {
var rng = tObj.createTextRange();
rng.move('character', sPos);
rng.select();
}
}
}

$('#button0').click(function() {
var input = document.getElementById('select');
alert(getCaretPosition(input));
});
$('#button1').click(function() {
var input = document.getElementById('select');
var index = document.getElementById('number').value;
setCaretPosition(input, index);
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航