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中增加参数与Json转换代码
Nov 20 Javascript
jquery 插件开发备注
Aug 27 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
详解JavaScript中的this指向问题
2021/02/05 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python中dict和set的用法讲解
2019/03/28 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
班干部演讲稿
2014/04/24 职场文书
大学生自荐材料范文
2014/12/30 职场文书
运动会宣传语
2015/07/13 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers