設置文本輸入框光標位置，兼容ie，w3c

時間 2019-12-01

標籤設置文本輸入光標位置兼容 w3c 欄目 C&C++ 简体版

原文原文鏈接

原效果預覽

點擊「話題」這個文字按鈕後，在輸入框文本域裏面就會添加一段文字「#請在這裏輸入自定義話題#」，其中「請在這裏輸入自定義話題」處於被選中的狀態，這樣用戶無需再選中文字，直接敲鍵盤就能夠替換這部份內容，這是很是好的一個提升用戶體驗的細節。javascript

2、效果的實現

文字的選中功能是不太經常使用的功能，多出如今文本編輯器中，或是文本域之類的光標處理上。因此呢，使用的一些屬性也並非常見的。在IE瀏覽器下使用的是createTextRange而Firefox/chrome等現代瀏覽器下使用的是setSelectionRange。html

假設文本域對象的名稱是obj，則在IE及非IE瀏覽器下實現指定文字選中的代碼以下：java

IE瀏覽器下：

var range = obj.createTextRange();  
range.moveStart("character", 開始序號);           
range.moveEnd("character", 結束序號);
range.select();

非IE瀏覽器下：

obj.setSelectionRange(開始序號, 結束序號);
obj.focus();

因此，爲了在各個瀏覽器下都能實現效果，咱們須要將上面的兩段代碼組合一下，結果以下：

if(obj.createTextRange){//IE瀏覽器
    var range = obj.createTextRange();              
    range.moveEnd("character",結束序號);
    range.moveStart("character", 起始序號);
    range.select();
}else{//非IE瀏覽器
    obj.setSelectionRange(起始序號, 結束序號);
    obj.focus();
}