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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 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
模仿OSO的论坛(三)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php中namespace及use用法分析
2016/12/06 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
微信小程序 本地数据读取实例
2017/04/27 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python 实现链表实例代码
2017/04/07 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
详解Python 循环嵌套
2020/07/09 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
婚礼迎宾词大全
2015/08/10 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
CSS极坐标的实例代码
2021/06/03 HTML / CSS
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技