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 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
vue组件学习教程
Sep 09 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
React配置子路由的实现
Jun 03 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的五种设计模式
2012/09/05 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python Selenium库的基本使用教程
2021/01/04 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
美术教学感言
2014/02/22 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
关于环保的建议书400字
2014/03/12 职场文书
娱乐节目策划方案
2014/06/10 职场文书
员工年终自我评价
2014/09/14 职场文书
公民授权委托书范本
2014/09/17 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书