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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 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
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python中dir函数用法分析
2015/04/17 Python
详细分析python3的reduce函数
2017/12/05 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
详解python中eval函数的作用
2019/10/22 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
毕业自我评价范文
2013/11/17 职场文书
老师自我鉴定范文
2013/12/25 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
高二化学教学反思
2016/02/22 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python