提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

javascripttextarea光标定位方法(兼容IE和FF)

定位方法 兼容 IE FF 光标
2023-06-13 09:14:27 时间
今天在做一个博客转发的功能，就像新浪微薄转播的那个功能一样，有一个textArea,就是我们发微薄的那个框，别人的微薄都有一个转发的按钮，当我们点击这个转发按钮的时候，他的微薄就会进入到textArea中，看起来很简单的文本框赋值，其实难点就在于，这时候的光标是定位在最前面的。

于是搜索了baidu,google,找到了
IE下面的方法
复制代码代码如下:

vartea=document.getElementById("文本框的ID");
vartxt=textArea.createTextRange();
txt.moveEnd("character",0-tempText.text.length);
txt.select();

但是这个方法只有在IE的浏览器下面才可用，于是通过网络搜索找到了一篇博客
google了N久，尝试了各种方法，大多不是不支持IE就是IEONLY，最终师父告诉我一个老页面里面有这个功能，找到那段代码试了下,IE和FF都成功了！
共享一下代码
复制代码代码如下:

functionlocatePoint(){
varaCtrl=document.getElementById("txtContent");
if(aCtrl.setSelectionRange){
setTimeout(function(){
aCtrl.setSelectionRange(0,0);//将光标定位在textarea的开头，需要定位到其他位置的请自行修改
aCtrl.focus();
},0);
}elseif(aCtrl.createTextRange){
vartextArea=document.getElementById("txtContent");
vartempText=textArea.createTextRange();
tempText.moveEnd("character",0-tempText.text.length);
tempText.select();
}
}

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

所以兼容的方法我们可以用一个if加入判断，整合方法如下，也正如那个帖子里的一样
html部分
复制代码代码如下:
<inputid="tea"type="text"size="100"value="">
<buttononclick="xx()">转发</button>

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

相关文章