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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
php 进度条实现代码
2009/03/10 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JS表的模拟方法
2015/02/05 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
vuex 的简单使用
2018/03/22 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python 画条形图(柱状图)实例
2020/04/24 Python
判断单链表中是否存在环
2012/07/16 面试题
质检部职责
2013/12/28 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
学生自我评语大全
2014/04/18 职场文书
学校教师安全责任书
2014/07/23 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
裁员通知
2015/04/25 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
教你用python实现12306余票查询
2021/06/30 Python
nginx.conf配置文件结构小结
2022/04/08 Servers