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实现的页面日历
Nov 04 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
node+express制作爬虫教程
Nov 11 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP7匿名类用法分析
2016/09/26 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vue实现五子棋游戏
2020/05/28 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python正则实现提取电话功能
2018/02/24 Python
python3中的md5加密实例
2018/05/29 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
学习心得体会
2014/01/01 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
小学生暑假家长评语
2014/04/17 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
英语导游词
2015/02/13 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android