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 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
vuex 的简单使用
Mar 22 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
js继承的这6种方式!(上)
Apr 23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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 date函数参数详解
2006/11/27 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python中的print()输出
2019/04/12 Python
Python中psutil的介绍与用法
2019/05/02 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
德国网上花店:Valentins
2018/08/15 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
房屋质量投诉书
2015/07/02 职场文书
关于车尾的标语大全
2015/08/11 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android