兼容IE和FF的javascript光标定位方法

by 空中飞人飞空中

at 2011-03-12 12:05:00

original http://www.cnblogs.com/jiaguang/archive/2011/03/12/1982126.html

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

于是搜索了baidu,google,找到了

IE下面的方法

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

但是这个方法只有在IE的浏览器下面才可用，于是通过网络搜索找到了博客园的一篇博客

http://www.cnblogs.com/zmz911/archive/2010/03/24/1694061.html

找到了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>

作者: 空中飞人飞空中发表于 2011-03-12 12:05 原文链接

评论: 2　查看评论　发表评论

最新新闻：
· iPad阴影下的平板电脑：遭遇黎明前的黑暗(2011-03-13 10:22)
· Engadget主编宣布离职疑因不满AOL政策(2011-03-13 10:20)
· Facebook计划测试团购服务挑战Groupon(2011-03-13 10:19)
· 惠普首席执行官李艾科：将收购更多软件公司(2011-03-13 09:55)
· LinkedIn推出新闻整合服务LinkedIn Today(2011-03-13 09:51)

编辑推荐：【公告】服务器成功迁移至新机房

网站导航：博客园首页我的园子新闻闪存小组博问知识库

Google Reader