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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
django 模型中的计算字段实例
2020/05/19 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
行政助理工作职责范本
2014/03/04 职场文书
小学评语大全
2014/04/22 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
单位委托函范文
2015/01/29 职场文书
昆虫记读书笔记
2015/06/26 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书