Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 js实现textarea光标定位的方法(兼容IE和FF)

js实现textarea光标定位的方法(兼容IE和FF)

发布时间:2014-08-17   编辑:www.jquerycn.cn
js实现textarea中光标的定位方法,兼容多浏览器,供大家学习参考。

js实现textarea中光标的定位方法,兼容多浏览器,供大家学习参考。

IE下的方法

复制代码 代码如下:
var tea=document.getElementById("文本框的ID");
var txt=textArea.createTextRange();
txt.moveEnd("character",0-tempText.text.length);
txt.select();

但是这个方法只有在IE的浏览器下面才可用,以下是一个IE和FF都可用的代码。

复制代码 代码如下:
function locatePoint(){
var aCtrl = document.getElementById("txtContent");
if (aCtrl.setSelectionRange) {
setTimeout(function() {
aCtrl.setSelectionRange(0, 0); //将光标定位在textarea的开头,需要定位到其他位置的请自行修改
aCtrl.focus();
}, 0);
}else if (aCtrl.createTextRange) {
var textArea=document.getElementById("txtContent");
var tempText=textArea.createTextRange();
tempText.moveEnd("character",0-tempText.text.length);
tempText.select();
}
}

FF下的方法:

复制代码 代码如下:
var tea=document.getElementById("文本框的ID");
tea.setSelectionRange(0, 0); //将光标定位在textarea的开头,需要定位到其他位置的请自行修改
tea.focus();

所以兼容的方法我们可以用一个if加入判断,整合方法如下:
html部分

复制代码 代码如下:
<input id="tea" type="text" size="100" value="">
<button onclick="xx()">转发</button>

JS部分

复制代码 代码如下:
<script language="javascript">
var tea = document.getElementById("tea");
function locatePoint(){
if (tea.setSelectionRange) {
setTimeout(function() {
tea.setSelectionRange(0, 0); //将光标定位在textarea的开头,需要定位到其他位置的请自行修改
tea.focus();
}, 0);
}else if (tea.createTextRange) {
var txt=tea.createTextRange();
txt.moveEnd("character",0-txt.text.length);
txt.select();
}
}
function xx(){
tea.value = 'bbb';
locatePoint();
}
</script>

您可能感兴趣的文章:
js中光标定位的方法
js光标定位的实例代码
js实现textarea光标定位的方法(兼容IE和FF)
在文本框(textarea)光标处插入文本的js代码
JS限制textarea中输入字数的代码
JS限制Textarea文本域字符个数的代码分享(图文)
javascript限制文本框textarea输入字数的代码
textarea 换行字数限制问题的解决方法
通过上下左右键和回车键切换光标实现代码
js实现跟随光标的提示框的代码

关键词: textarea  光标定位   
[关闭]