javascript textarea光标定位方法(兼容IE和FF)_javascript技巧
程序员文章站
2022-05-04 16:33:12
...
今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个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部分
JS部分
于是搜索了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部分
复制代码 代码如下:
JS部分
复制代码 代码如下:
推荐阅读
-
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结_javascript技巧
-
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码_javascript技巧
-
兼容IE和FF的js脚本代码小结(比较常用)_javascript技巧
-
关于onchange事件在IE和FF下的表现及解决方法_javascript技巧
-
关于onchange事件在IE和FF下的表现及解决方法_javascript技巧
-
js导出table到excel同时兼容FF和IE示例_javascript技巧
-
Firefox和IE兼容性问题及解决方法总结_javascript技巧
-
javascript event在FF和IE的兼容传参心得(绝对好用)_javascript技巧
-
ff chrome和ie下全局动态定位的异同及全局高度的取法_javascript技巧
-
兼容FF和IE的动态table示例自写_javascript技巧