首頁  >  文章  >  web前端  >  js移動焦點到最後位置的簡單方法

js移動焦點到最後位置的簡單方法

高洛峰
高洛峰原創
2016-12-05 11:52:001436瀏覽

當輸入框(input/textarea)獲得焦點時,將焦點移動到最後,在某些情況下用戶體驗很好。網路上的方法大部分都是針對IE瀏覽器的。

程式碼如下:

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();

   

其實可以將moveStart這行刪除,因為createTextRange方法建立range後,利用collapse方法,參數為false就可以移動到最後了。 collapse(true)移動遊標到range的開始,collapse(false)移動遊標到range的結尾。 Firefox等標準瀏覽器可以使用w3c的setSelectionRange方法。

程式碼如下:

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}

   

注意setSelectionRange方法只適用於input/textarea元素。其它非原生的可編輯元素的焦點移到可以利用selection物件的collapse方法,

例如:

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();

   


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn