javascript textarea游標定位方法(相容IE和FF)

來源:互聯網
上載者:User

今天在做一個部落格轉寄的功能,就像新浪微薄轉播的那個功能一樣,有一個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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.