javascript作為非常常見的一種前端語言，在前端開發中起到不可替代的作用。而在其中一個很常見的操作——表單輸入中，對input光標的控制也是非常重要的。下面，本文就對input光標的控制進行詳細講解。

input光標的定位

input元素中的光標是非常常見的，無論是在PC端還是在移動端，用戶在輸入過程中都會看到光標在不停地閃爍。首先，我們就看一下如何定位光標的位置。

//獲取光標位置
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);
}

上面這段代碼可以通過獲取光標的位置來實現對input光標的控制。其中，IE瀏覽器的支持需要通過createRange()方法獲取，而其他瀏覽器可以通過selectionStart 和 selectionEnd 實現。

input光標的移動

除了獲取光標位置，通過JavaScript還可以實現光標的左右移動。比如，如果你正在寫一個搜索框，當你輸入某些文字后要通過點擊某個按鈕將光標落在串的某個位置上。那么，如何實現移動光標呢？下面的代碼可以詳細地展示這個過程。

//設置光標位置
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();
}
}

上面的代碼中，setCaretPosition方法接受兩個參數，一個是需要設置光標的input元素，另一個是需要移動到的位置。可以看到，在IE瀏覽器中，需要通過createTextRange()方法來實現。而其他的瀏覽器是可以通過setSelectionRange()方法來移動input光標。

input光標的選中與刪除

光標除了移動外，還有一個非常重要的功能——選中。比如，在某些場景下，我們需要將表單中已經輸入的內容刪除。如果需要刪除一個選中的內容，而不是每次刪除一個字符，那么就需要選中文本。下面的代碼將實現這個功能。

//選中文本
function selectText (ctrl, startPos, endPos){
if(ctrl.setSelectionRange){
ctrl.setSelectionRange(startPos, endPos);
}
else if (ctrl.createTextRange){
var range = ctrl.createTextRange();
range.move('character', startPos);
range.select();
}
}
//刪除選中內容
function deleteSelectedText (ctrl) {
var startPos = ctrl.selectionStart;
var endPos = ctrl.selectionEnd;
ctrl.value = ctrl.value.substring(0, startPos) + ctrl.value.substring(endPos);
selectText(ctrl, startPos, startPos);
}

上面的代碼中，deleteSelectedText方法接受一個參數，就是需要被刪除內容所在的input元素。當然，deleteSelectedText方法必須先調用selectText方法來獲取選中的文本內容，之后再將光標移動到選中的文本的開始位置以及刪除選中的文本內容。值得一提的是，通過substring()方法來實現文本內容的截取。

總結

通過本文的講解，相信大家對于如何通過JavaScript操作input光標已經有了比較清晰的認識。其實，在前端開發中，對于input光標的控制可能會出現各種巧妙的解決方法，但是最終的原理還是和上面講的趨近相同的。因此，在處理此類問題時不要抱有僥幸心理，還是應該踏踏實實地通過JavaScript來實現。