时间:2021-05-28
今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
光标位置INPUT{border:1solid#000000}BODY,TABLE{font-size:10pt}点击TextArea实现光标定位我怕来不及我要
JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)JavaScript无缝上下滚动加定高定宽停顿效果(兼容ie/ff)body{font-si
JavaScript获取/设置光标位置,兼容Input&&TextArea。body{margin:32px;font-family:Verdana,sans-
IE下的Range操作比Mozilla下强很多,这里只讨论IE下的操作。这里选介绍几个光标定位的特点:1.光标不变直接obj.focus(),光标会返回之前的位
end键盘为光标定位按键,作用是:当输入一行文本且光标不再末尾时,按下“END”键会使光标定位到该行末尾,常用于文本输入时快速定位。 END键还可以和CTRL