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

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

2011-03-12 00:00 881 查看
今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的。

于是搜索了baidu,google,找到了
IE下面的方法
var tea=document.getElementById("文本框的ID"); 
var txt=textArea.createTextRange(); 
txt.moveEnd("character",0-tempText.text.length); 
txt.select();

但是这个方法只有在IE的浏览器下面才可用,于是通过网络搜索找到了一篇博客
google了N久,尝试了各种方法,大多不是不支持IE就是IE ONLY,最终师父告诉我一个老页面里面有这个功能,找到那段代码试了下,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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: