javascript textarea光标定位方法(兼容IE和FF)
更新时间：2011年03月12日 13:17:07 作者：
主要是实现textarea中光标的定位方法，考虑到多浏览器的兼容性，需要的朋友可以参考下。
今天在做一个博客转发的功能，就像新浪微薄转播的那个功能一样，有一个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>
于是搜索了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>
您可能感兴趣的文章:
- 把textarea中字符串里含有的回车换行替换成<br>的javascript代码
- JS控制文本框textarea输入字数限制的方法
- javascript textarea字数限制
- TextArea设置MaxLength属性最大输入值的js代码
- JavaScript判断textarea值是否为空并给出相应提示
- JavaScript中统计Textarea字数并提示还能输入的字符
- 在textarea中显示html页面的javascript代码
- JavaScript 获取/设置光标位置,兼容Input&&TextArea
- 用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[
- 关于js对textarea换行符的处理方法浅析
相关文章
这篇文章主要为大家详细介绍了原生javascript实现连连看游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要为大家详细介绍了Js获取当前日期时间及格式化代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了taro开发微信小程序的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
九种js弹出对话框的方法总结，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了JavaScript检测上传文件大小的方法,涉及javascript针对上传文件的相关判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要帮助大家理解JavaScript中worker事件api，对worker事件api有一个深刻了解，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了canvas滤镜效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
ionic2自定义cordova插件开发以及使用（Android）
这篇文章主要为大家详细介绍了ionic2自定义cordova插件开发以及使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。2009-08-08
这篇文章主要介绍了js与css实现弹出层覆盖整个页面的方法,分别以实例形式展示了弹出层覆盖整个页面的css样式与js控制的实现技巧,非常具有实用价值,需要的朋友可以参考下2014-12-12
最新评论