javascript textarea光标定位方法(兼容IE和FF)_javascript技巧-js教程-PHP中文网

javascript textarea光标定位方法(兼容IE和FF)_javascript技巧

php中文网

发布： 2016-05-16 18:09:44

原创

1255人浏览过

今天在做一个博客转发的功能，就像新浪微薄转播的那个功能一样，有一个textArea,就是我们发微薄的那个框，别人的微薄都有一个转发的按钮，当我们点击这个转发按钮的时候，他的微薄就会进入到textArea中，看起来很简单的文本框赋值，其实难点就在于，这时候的光标是定位在最前面的。

于是搜索了baidu,google,找到了
IE下面的方法

落笔AI

AI写作，AI写网文、AI写长篇小说、短篇小说

查看详情

复制代码代码如下:

 
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部分

复制代码代码如下:

大家都在看：

正确处理异步表单提交中 textarea 元素值获取为 null 的问题解决JavaScript异步表单提交中Textarea值获取为空的问题解决异步表单提交中Textarea值获取为‘null’的问题前端实现实时Markdown编辑器_javascript实战正确处理React TextArea的onChange事件：捕获值与状态更新