基本的認識：
文本選中區域光標：頁面中閃爍的光標其實就是特殊的寬度為0的選區。 簡單理解就是選區的左右邊界交叉形成了光標。 有了這個概念下面的內容就很好理解了。
非IE瀏覽器下的實現
這里需要用到input元素的兩個屬性。
selectionStart、selectionEnd 選區開始位置，選區結束位置。
二者代表了選中區域的左右邊界。
兩個值默認都是0，所以當我們使用input.focus()方法時，默認光標在文本的開頭。(注意這里並不是說每次focus調用光標都出現在開頭。是因為selectionStart的和selectionEnd的值隨着文本輸入而改變，因而光標的位置隨之改變。)
文本選中
我們設置
input.selectionStart = 0; //選中區域左邊界
input.selectionEnd = input.value.length; //選中區域右邊界
上面的代碼可以選中輸入框的全部內容。 等同於input.select();
input.selectionStart = 1; //選中區域左邊界
input.selectionEnd = 4; //選中區域右邊界
上面的代碼選中了234三個字符。
我們如何獲取選中的文本內容呢？ 因為已經知道了selectionStart和selectionEnd,所以用字符串的substring方法
var selection = input.value.substring(input.selectionStart,input.selectionEnd);
光標位置
設置光標
input.selectionStart = 5; //選中區域左邊界
input.selectionEnd = 5; //選中區域右邊界
上面的代碼把光標放到5的后面。
獲取光標位置
直接使用selectionStart和selectionEnd中的任意一個值即光標的位置。
IE瀏覽器下的實現
IE下對於文本流的處理提供了更加強大的支持，不過這里我只着重於這篇文章的主旨。
var range = input.createTextRange(); //創建一個文本選區對象。
這個選區對象默認包含了input的全部文本內容。需要注意的是，這個選區對象是一個抽象的區域。，在調用range.select()方法之前，選區對象的內容並不會被選中。
range.select(); //將選區對象包含的內容選中。
我們可以用 range.text屬性得到選中的文字
選區有兩個類似於上面selectionStart和selectionEnd屬性的方法， moveStart和moveEnd方法。
上面我們說過，這個選區對象包含input的全部文本內容，所以它的左右邊界分別就是文本的開頭和結尾位置。
moveStart方法用來移動左邊界。 像這樣調用
range.moveStart("character",2); //左邊界右移兩個字符 。 character--字符
range.select(); //將range包含的區域選中。
結果
moveStart和moveEnd都要傳入兩個參數，第一個參數可選值有 character、word、sentence、textedit. 這里我們只用到character，即根據字符來偏移。 第二個參數代表偏移的多少，正負表示方向。
我們知道左邊界最初默認是0，右邊界默認是文本內容長度值。
我們注意到每次選中區域的操作都需要調用range.select()方法，通過select方法來把range對象包含的內容區域選中。這與上面的其他瀏覽器的實現方式貌似有了大的差異。
還有一個很有用的方法 collapse， 見名知意，就是將選區對象的范圍壓縮，下面詳細介紹。
collapse可以傳入一個布爾值作為參數,參數默認值為true，指示向左還是向右壓縮。
var range = input.createTextRange(); //創建選區對象
//此時選區對象的左邊界為0,右邊界為input.value.length;
range.collapse();
//此時選區對象左邊界為0，右邊界為0； 相當於將選區向左收縮了,即使右邊界下標等於左邊界下標。
//左右邊界重合,可以顯示光標。
range.select();
collapse(true)相當於讓右邊界下標等於左邊界下標。
再試看看collapse(false）
var range = input.createTextRange(); //創建選區對象
//此時選區對象的左邊界為0,右邊界為input.value.length;
range.collapse(false);
//此時選區對象左邊界為input.value.length，右邊界為input.value.length； 相當於將選區向右收縮了,即使左邊界下標等於右邊界下標。
//左右邊界重合,可以顯示光標。
range.select();
我們使用collapse(false)結合select方法可以很方便的把光標focus到文本框的末尾。
還有一個move方法
var range = input.createTextRange();
range.moveStart("character",2);
range.select();
range.move("character",3);
//等價於 range.collpase(true); range.moveStart("character",3);range.moveEnd("character",3); 三步。合一
range.select();
這個方法和moveStart有一樣的參數，不過有點難以理解。 上面的代碼相當於------先將選區向左收縮，這時候就相當於一個光標咯，然后將光標右移三個字符。
當我們要移動光標時，move函數必然是一個非常不錯的選擇。
---------------------
作者：itdragons
來源：CSDN
原文：https://blog.csdn.net/itdragons/article/details/52186058
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！