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


Posted in Javascript onMarch 12, 2011

今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
JavaScript全局函数使用简单说明
Mar 11 #Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 #Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 #Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 #Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 #Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 #Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 #Javascript
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
php-msf源码详解
2017/12/25 PHP
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
python flask实现分页效果
2017/06/27 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
超简单使用Python换脸实例
2019/03/27 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
初中生学习的自我评价
2013/11/14 职场文书
教师个人自我鉴定
2014/02/08 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
教师节演讲稿
2014/05/06 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
银行求职信范文
2014/05/26 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python Matplotlib库实现画局部图
2021/11/17 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫