JavaScript实现textarea光标定位兼容IE与Firefox

JavaScript实现textarea光标定位兼容IE与Firefox

在开发博客转发功能时，类似新浪微博的转播机制，涉及一个textarea元素，即用户发布微博的输入框。当点击转发按钮时，目标微博内容会填入该textarea。这一过程看似简单的文本赋值，但关键难点在于光标默认停留在文本最前端。

通过百度搜索和Google搜索，找到了相关解决方案。

IE浏览器下的实现方法

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

然而，上述方法仅在IE浏览器中有效。经过网络搜索，找到一篇博客提供了进一步思路。

经过多次Google搜索和多种方法尝试，发现多数方案要么不支持IE，要么仅适用于IE。最终，通过师父提供的老页面代码示例，在IE和Firefox中均测试成功。

以下共享该兼容代码。

 
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();
} 
} 

Firefox浏览器下的实现方法

 
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>

JavaScript部分代码

 
<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>