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 load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 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
3.从实例开始
2006/10/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
Python3实现定时任务的四种方式
2019/06/03 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python实现点云投影到平面显示
2020/01/18 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
基层干部十八大感言
2014/01/19 职场文书
公司中秋节活动方案
2014/02/12 职场文书
小学三年级学生评语
2014/04/22 职场文书
活动总结怎么写
2014/04/28 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
老公出轨后的保证书
2015/05/08 职场文书
检讨书怎么写?
2019/06/21 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Elasticsearch 聚合查询和排序
2022/04/19 Python