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插件制作 学习过程及实例
Apr 25 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
CI框架表单验证实例详解
2016/11/21 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python 私有函数的实例详解
2017/09/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python操作mysql代码总结
2018/06/01 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
kfc实习自我鉴定
2013/12/14 职场文书
拉拉队口号
2014/06/16 职场文书