在使用jQuery開發前端頁面時,我們有時會遇到需要設置光標位置不變的情況,例如在輸入框中插入內容后,希望光標仍停留在原來的位置。這時可以使用jQuery來實現該功能。
//獲取光標位置 function getCursortPosition(ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus(); var Sel = document.selection.createRange(); Sel.moveStart('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); } //設置光標位置 function setCaretPosition(ctrl, pos) { if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }
以上是獲取和設置光標位置的代碼,可以將其封裝進一個函數中,方便調用。
具體用法如下:
var input = $('#input'); var pos = getCursortPosition(input[0]); input.val("添加內容"); setCaretPosition(input[0], pos);
以上代碼可以保證在輸入框中添加內容后,光標位置不變,提高了用戶體驗,同時也為頁面交互帶來了便利。
下一篇div 橢圓