Question

JavaScript textarea中设置光标位置 然后键盘输入替换光标处已有的内容 急急急

各位大神 JavaScript里面用textarea作为一个主要是显示功能的文本框 现在需要一个功能 是 把光标定位到已有内容中的一个位置(注:已有内容是两行文字 要定位在第二行开头) 然后光标后面是几个小横线 这时用键盘输入数字 直接替换已有的小横线 有点像工行密码器刚开始输入密码的那个功能 各位帮帮忙啊

Answer 1

<div>
<textarea id="ta" style="width:500px;height:500px;"></textarea>
</div>

<script type="text/javascript">

$(function() {
var setCaretPos = function(element, location){
if(element.setSelectionRange)
{
element.focus();
element.setSelectionRange(location,location);
}
else if (document.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.collapse(true);
range.move('character', location);
range.select();
}
};
$("#ta").keydown(function(event){
var t = $("#ta");
var tempValue = t.val();
var pos = t.get(0).selectionStart;
var newValue = tempValue.substring(0, pos) + tempValue.substring(pos + 1, tempValue.length);
t.val(newValue);
setCaretPos(t.get(0), pos);
});
$("#ta").val("testtest\n______");
setCaretPos($("#ta").get(0), $("#ta").val().split('\n')[0].length + 1);

});
</script>

具体思路是
1. setCaretPos(element, pos)就是将光标设置在element元素的pos位置
2. 键盘监听
a, 获取当前光标位置
b, 将当前位置后面的那个 _ 去掉(这里面要取原文本, 然后处理, 然后结果写到textarea中, 注意, 此时textarea的光标在最后位置, 所以又第三步)
c, 将光标定位到原当前位置
然后键盘输入自然会在光标的后面位置, 也就是实现了insert功能

我在firefox, ie9下测试通过, 使用了jquery去取dom元素, 如果没有jquery, 可以document直接取

如果觉得满意, 请采纳 谢谢

追问

麻烦请详细点吧？

追答

你哪里还没有弄明白，