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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Js组件的一些写法
2010/09/10 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python shutil模块用法实例分析
2019/10/02 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
PyQt5实现简单的计算器
2020/05/30 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
毕业生找工作推荐信
2013/11/21 职场文书
学校安全检查制度
2014/01/27 职场文书
经典演讲稿汇总
2014/05/19 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
公务员政审材料
2014/12/23 职场文书
业务员岗位职责
2015/02/03 职场文书
员工工作表现自我评价
2015/03/06 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
浅析Python中的套接字编程
2021/06/22 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python