一：理解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>