管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　今天在做一个博客转发的功能，就像新浪微薄转播的那个功能一样，有一个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>

教程首页 更多教程