javascript textarea光标定位方法(兼容IE和FF)_Javascript教程-查字典教程网
javascript textarea光标定位方法(兼容IE和FF)
javascript textarea光标定位方法(兼容IE和FF)
发布时间:2017-01-14 来源:查字典编辑
摘要:今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当...

今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个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>转发</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教程学习
    热门Javascript教程学习
    编程开发子分类