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

　　推荐阅读

　　JavaScript获取页面上某个元素的代码

W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素，常见的方法有getElementById（）、getElementsByName（）、getElementsByTagName（），他们的作用分别通过id属性、name属性/标签名称返回单个>>>详细阅读

本文标题：javascript textarea光标定位方法(兼容IE和FF)

地址：http://www.17bianji.com/kaifa2/JS/24815.html

 1/2    1