當輸入框(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();