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 Tab效果和动态加载的简单实例
Dec 11 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
javascript回到顶部特效
Jul 30 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
JS事件绑定的常用方式实例总结
Mar 02 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下使用SMTP发邮件的代码
2008/01/10 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python如何实现文本转语音
2016/08/08 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
对pandas中to_dict的用法详解
2018/06/05 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
交通工程专业推荐信
2014/09/06 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
婚庆答谢词
2015/01/04 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
行政处罚听证告知书
2015/07/01 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript