一：理解input, textarea元素在標準瀏覽器下兩個屬性selectionStart, selectionEnd。
selectionStart: 該屬性的含義是 選區開始的位置；
selectionEnd: 選區結束的位置。
兩個值預設都是為0。
注意： 該屬性在chrome，safari和firefox都有用，標準瀏覽器下使用這兩個屬性。
我們先來看看如下程式碼，列印下如下可以看到：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <input id="inputId" type="text" oninput="inputFunc()" onkeyup="keyupFunc()"/> <textarea id="textareaId" oninput="textareaFunc()"></textarea> <script> var inputId = document.getElementById("inputId"); console.log(inputId.value); console.log(inputId.selectionStart); console.log(inputId.selectionEnd); function inputFunc() { console.log(inputId.value); console.log(inputId.selectionStart); console.log(inputId.selectionEnd); } function textareaFunc() { var textareaId = document.getElementById('textareaId'); console.log(textareaId.selectionStart); console.log(textareaId.selectionEnd) } </script> </body> </html>
上面兩個屬性都代表了 選中區域的左右邊界。預設值都是為0，當我們使用 focus()方法時，預設的游標在文字框的開頭位置。我們可以如下設定該屬性值如下：
input.selectionStart = 0; // 選中區域左邊界 input.selectionEnd = input.value.length; // 選中區域的右邊界
上面的程式碼可以選中輸入框的全部內容, 等同於input.select();
那麼我們如何獲取選中的文字內容呢？我們可以使用 substring方法擷取字串；比如如下程式碼：
var text = input.value.substring(input.selectionStart, input.selectionEnd);
比如如下demo，頁面上預設有一個輸入框，然後輸入框預設有值，然後通過上面兩個屬性selectionStart，selectionEnd 來選中文字，然後通過substring方法輸出input的文字。如下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <input id="inputId" type="text" value="aaabbbbccccdddd"/> <script> var inputId = document.getElementById('inputId'); inputId.selectionStart = 2; inputId.selectionEnd = inputId.value.length; var text = inputId.value.substring(inputId.selectionStart, inputId.selectionEnd); alert(text); // 從第三個字元開始 因此輸出 abbbbccccdddd </script> </body> </html>
因此我們可以對標準瀏覽器下 對游標位置進行設定，比如頁面初始化的時候，我們可以設定游標的位置：如下程式碼：
input.selectionStart = 1; // 選中區域的左邊界 input.selectionEnd = input.value.length - 1; // 選中區域的右邊界
如上程式碼，在頁面初始化的時候 可以設定游標的位置。
IE瀏覽器下如何實現的呢？
IE瀏覽器下建立一個文字選取物件，使用 createTextRange()方法；如下程式碼：
var range = input.createTextRange();
上面的這個選區物件預設包含了input的全部文字內容。但是該選區物件的內容並不會選中。因此需要呼叫 select()方法；如下程式碼：
range.select();
我們也可以使用 range.text屬性得到選中的文字。
對於標準瀏覽器下可以使用 selectionStart和selectionEnd屬性的方法拿到選區的開始位置和結束位置，那麼對於IE瀏覽器下可以使用 moveStart和moveEnd方法。
二：理解 IE瀏覽器下的 moveStart 和 moveEnd 方法
這兩個方法的選區物件包含input的全部文字內容，所以它的左右邊界就是文字的開頭和結束位置。
moveStart方法的含義是： 用來移動左邊界。如下程式碼：
rangeObj.moveStart("character", 2); // 最左邊界右移2個字元
rangeObj.select(); // 將range包含的區域選中
上面兩個方法都需要傳入兩個引數，第一個引數的可選值有 character(根據字元來偏移), word, sentence, textedit, 第二個引數代表偏移的多少，正負表示方向。
左邊界最初預設為0，右邊界預設是文字內容的長度值。
注意：rangeObj.select() 方法， 該方法是把range物件中的內容選中；
三：理解setSelectionRange
該方法可以理解為input元素的方法：
HTMLInputElement.setSelectionRange();
該方法的作用是：可以為當前元素內的文字設定選中範圍。簡單的說，可以通過設定起始於終止位置，來選中一段文字中的一部分。使用方式如下：
inputElement.setSelectionRange(selectionStart, selectionEnd, [selectionDirection]);
引數的含義如下：
selectionStart: 第一個被選中的字元的序號(index), 從0開始的。
selectionEnd: 被選中的最後一個字元的
selectionDirection: 選擇的方向，可選值為 forward, backward, 或 none.
我們下面來做一個demo，當滑鼠focus input框的時候，文字的內容會被選中，如下程式碼演示一下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <input id="inputId" type="text" value="這是一段測試文字"/> <script> var inputId = document.getElementById('inputId'); inputId.addEventListener('focus', function() { if(inputId.setSelectionRange) { inputId.setSelectionRange(0, inputId.value.length); } }); </script> </body> </html>
該方法的在瀏覽器下的相容性如下：
屬性 chrome firefox IE opera safari setSelectionRange 1.0 1.0 9 8.0 支援 selectionDirection 15 8.0 支援
一般情況下，主流瀏覽器都支援的，對於selectionDirection該屬性，相容性雖然不是很好，但是不應該該方法的使用。
控制游標位置
如何通過該方法來控制input標籤的游標位置呢？比如在頁面初始化的時候，我想預設選中部分文字，如何控制？
下面我們來繼續做一個demo，通過點選(focus事件)，來選中input值(除了第一個字元和最後兩個字元)，其他的字元都選中，程式碼改成如下：
inputId.setSelectionRange(1, inputId.value.length - 2);
所有程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <input id="inputId" type="text" value="這是一段測試文字"/> <script> var inputId = document.getElementById('inputId'); inputId.addEventListener('focus', function() { if(inputId.setSelectionRange) { inputId.setSelectionRange(1, inputId.value.length - 2); } }); </script> </body> </html>
通過上面的基礎知識點，我們可以做如下的demo
JS獲取文字焦點游標位置，選中起始位置，終止位置 和 選中內容的demo；
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <p> <label>點選文字框內容觸發事件</label> <input type="text" id="txt" value="abcdefghijklmn" onclick="getSelectPosition(this);"> </p> <p> <label>焦點位置：</label> <input type="text" id="txt1" value=""> </p> <p> <label>選中起始位置：</label> <input type="text" id="txt2" value=""> <label>選中結束位置：</label> <input type="text" id="txt3" value=""> </p> <p> <label>選中內容：</label> <input type="text" id="txt4" value=""> </p> <script> function getSelectPosition($this) { var input1 = document.getElementById("txt1"); var input2 = document.getElementById("txt2"); var input3 = document.getElementById("txt3"); var input4 = document.getElementById("txt4"); var emptyValue = -1; var selectStart; var selectEnd; var pos; var selectText; if ($this.setSelectionRange) { // 標準瀏覽器 selectStart = $this.selectionStart; selectEnd = $this.selectionEnd; if (selectStart == selectEnd) { pos = selectStart; selectStart = emptyValue; selectEnd = emptyValue; } else { pos = emptyValue; } selectText = $this.value.substring(selectStart,selectEnd); } else { // IE瀏覽器 var range = document.selection.createRange(); selectText = range.text; range.moveStart("character",-$this.value.length); pos = range.text.length; selectStart = pos - (selectText.length); selectEnd = selectStart + (selectText.length); if(selectStart != selectEnd){ pos = emptyValue; }else{ selectStart = emptyValue; selectEnd = emptyValue; } } input1.value = pos; input2.value = selectStart; input3.value = selectEnd; input4.value = selectText; } </script> </body> </html>
input 輸入框按鍵盤上鍵的時候 游標會先到前面去，然後跳到後面來的解決方案如下：
keydown+e.preventDefault(阻止預設事件)的操作來解決；如下程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>標題</title> </head> <body> <input id="inputId" type="text" value="鍵盤箭頭上下移"/> <script> var inputId = document.getElementById('inputId'); inputId.addEventListener('keyup', function(e) { }); inputId.addEventListener('keydown', function(e) { e.preventDefault(); }); </script> </body> </html>