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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
js中创建对象的几种方式
Feb 05 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 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
php MYSQL 数据备份类
2009/06/19 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python文件和目录操作详解
2015/02/08 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python生成器与迭代器详解
2019/01/01 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python 制作网站小说下载器
2021/02/20 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
为什么要使用servlet
2016/01/17 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
高中运动会广播稿
2014/01/21 职场文书
2014年工程师工作总结
2014/11/25 职场文书
授权委托书
2015/01/28 职场文书
防暑降温通知书
2015/04/27 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android