新浪微博插入話題後部分文字選中的js實現

一、原效果預覽

黃曆顯示今天說話不適宜賣關子，所以直接上圖：

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

如果您有新浪微博賬號，應該對這個功能比較熟悉；如果您尚未註冊新浪微博，可以點擊這裏註冊。//zxx:我發現我好像成了新浪的託了，不行，我(不)要向新浪要廣告費……

二、效果的實現

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

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

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();
}

三、效果實例

您可以狠狠地點擊這裏：文本域文字部分選中實現demo

操作如下圖標示：

此demo代碼在頁面上均有展示，代碼的作用僅僅是示例，代碼的效率書寫等都有待改善，如果您想要封裝良好的文字選擇代碼，請看下面一節。

四、文字內容部分選中的代碼封裝

關於文字內容的選中可以用一個方法封裝起來，以便重用，由於IE不支持DOM leave3，所以Object.prototype不受用於DOM對象，所以這裏的方法還是比較傳統的，如下代碼：

var textSelect = function(o, a, b){
	//o是當前對象，例如文本域對象
	//a是起始位置，b是終點位置
	var a = parseInt(a, 10), b = parseInt(b, 10);
	var l = o.value.length;
	if(l){
		//如果非數值，則表示從起始位置選擇到結束位置
		if(!a){
			a = 0;	
		}
		if(!b){
			b = l;	
		}
		//如果值超過長度，則就是當前對象值的長度
		if(a > l){
			a = l;	
		}
		if(b > l){
			b = l;	
		}
		//如果爲負值，則與長度值相加
		if(a < 0){
			a = l + a;
		}
		if(b < 0){
			b = l + b;	
		}
		if(o.createTextRange){//IE瀏覽器
			var range = o.createTextRange();         
			range.moveStart("character",-l);              
			range.moveEnd("character",-l);
			range.moveStart("character", a);
			range.moveEnd("character",b);
			range.select();
		}else{
			o.setSelectionRange(a, b);
			o.focus();
		}
	}
};

例如，執行textSelect(obj, 10 30)就意味着對名爲obj的DOM對象值中的第10個到第30個字符進行選中。

您可以狠狠地點擊這裏：封裝良好的文字選中代碼測試demo

一些說明：
1. 只受用於一些含有value屬性的HTML控件，例如單行文本框、多行文本域；
2. 後面兩個參數表示起始字符位置與結束的字符位置，如果位置值爲空，或是非數值，則會（從頭或至尾或全部）選擇字符；
3. 支持負值，負值表意與js中的slice屬性一致，負值表示的含義就是負值與字符總長度的和，也可以理解爲從末尾開始選擇；
4. 如果數值範圍超過字符總長，則無內容選擇；
5. 支持單參數，省略第三個參數表示一致到字符結束都要選中。

五、結語

小小效果有大大學問，其他我就不多說了，希望能對您的學習有所幫助。

如果您發現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這裏進行提問交流。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=755