テキストフィールドでのカーソル位置の問題について

今回はやっとシステムフロントのカーソル位置に関するバグを解決しました~~~ここのテキストボックスで選択したオブジェクトはJSのAPIドキュメントでは詳しく話していないようで、サイの本でもこれを一筆持っていただけです.ネット上で多くの資料を調べて、以下はくだらないことを総括して言わないで、まっすぐにコードに向かいます:(jQプラグインで書いたので、外閉包は省略します)

	/**
	 *           
	 * @param {mix} pos
	 */
	$.fn.setFocus = function (pos){
		
		var DOMele = $(this).get(0);
		
		var _pos = 0;
		if(typeof pos == 'string'){
			if(pos == 'first'){
				_pos = 0;
			}else if(pos == 'last'){
				_pos = DOMele.value.length;
			}
		}else if(typeof pos == 'number'){
			_pos = pos;
		}

		if (document.all && DOMele.createTextRange) {//IE
            var range = DOMele.createTextRange();
			range.move("character",_pos);
			//range.moveStart('character',_pos);
			//range.collapse(true);
			range.select();
        }else {//FF
            if (DOMele.setSelectionRange) {
                DOMele.setSelectionRange(_pos, _pos);
				DOMele.focus();
            }
        }
		
		return this;
		
	};

選択対象には2種類の互換性のない対象が含まれており、IEとFF、chrome互換性がある(DOM L 2で定義された対象もあり、あまり使われていないようだが、ここでは省略する)
 
IE開始:
IEの選択対象は次の文によって作成される.

 var range = DOMele.createTextRange();

生成されるのはTextRange範囲オブジェクトであり、その後の一連の操作はそれに関連しなければならない.
このオブジェクトには、いくつかの属性と方法が含まれています.(原文参照:http://hi.baidu.com/longtao_1986/blog/item/c95cae30fa666410ebc4afbb.html)
 
属性boundingHeight TextRangeオブジェクトをバインドする矩形の高さboundingLeft取得TextRangeオブジェクトをバインドする矩形の左端とTextRangeオブジェクトを含む左側との距離offsetLeft取得オブジェクトのレイアウトまたはoffsetParentプロパティで指定された親座標に対する計算左側位置offsetTop取得オブジェクトのレイアウトまたはoffsetParentプロパティ指定した親座標の計算先端位置htmlTextバインドTextRangeオブジェクトの長方形の幅text設定または取得範囲に含まれるテキストメソッドmoveStart変更範囲の開始位置moveEnd変更範囲の終了位置collapse挿入点を前範囲の開始または終了moveが指定したテキスト範囲を折りたたみ、空範囲を受注元数execCommandは、現在のドキュメント、現在選択されている領域、または指定された範囲でコマンドselectを実行し、現在の選択領域を現在のオブジェクトfindTextとしてテキスト内でテキストを検索し、範囲の開始点と終了点を検索文字列を囲むように設定します. 
 
ここで私たちが最もよく使うのは、moveStar、moveEnd、collapse、move、selectなどのいくつかの方法にほかならない.
moveStar,moveEnd,moveのいくつかの方法のフォーマットは、次のようになります.

move("Unit"[,count])

こちらの「Unit」は、character(文字)、word(語)、sentence(段落)、texteditの単位を指定できます.
collapseはbooleanの伝達で開始または終了に位置決めされる
私の実験によると、IEの下でカーソルを決定するには2つの方法があります.

var range = DOMele.createTextRange();
range.move("character",_pos);
range.select();

これは直接moveで伝わります

var range = DOMele.createTextRange();
range.moveStart('character',_pos);
range.collapse(true);
range.select();

上はmoveStartで位置決めし、collapseでtrueに転送します.
最後のselectも直接範囲オブジェクトで参照されるので、テキストボックスDOMオブジェクトとは相互作用しない点に注意してください.これはFFとは全く違います.
IEの選択対象の使用については,ここまで浅く述べる.
 
次はFFとchromeの
IEの複雑さに対してFFの方がちょっと簡単~
まず、別の作成方法があります.
 

DOMele.setSelectionRange(_pos, _pos);

DOMオブジェクトのメンバー関数形式setSelectionRangeで作成され、先頭と末尾のカーソルポインタアドレスが入力されます.
ここは私がカーソルを表示するので、最初と最後を同じにします.
最後に選択するとIEとは異なり、DOMオブジェクトメンバーメソッドfocusでテキストボックスに直接フォーカスする
 
総合的にFFの比較はプログラミングに対する操作習慣に合っているが、IEの多かれ少なかれ硬い~
 
次は大きいのを来て、後でcaretPosというものを研究してから更新します~~はは(以前はネット上のcから、それから需要が変わったので私にたくさん変えられました)
 
 

	  
   
   /**
     *   tagTpl    
     * @param {String} tagTpl           
     * @param {Boolean} selectAble       
     */
    $.fn.insertAtCaret = function(tagTpl,selectAble){
		
        var textObj = $(this).get(0);
		
        if (document.all && textObj.createTextRange && textObj.caretPos) {

            var caretPos = textObj.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == "" ? tagTpl + "" : tagTpl;

			var re = eval("/" + tagTpl + "/i");
	        var startPos = textObj.value.search(re);
	        var endPos = textObj.innerHTML.length;
	        var endPosOffset = -(endPos - startPos - tagTpl.length) - 1;
	        var range = textObj.createTextRange();
	        var sel = range.duplicate();
			if(selectAble){
	        	sel.moveStart("character", startPos + 1);
	            sel.moveEnd("character", endPosOffset);
			}else{
				sel.move("character", endPos);
			}
	        sel.select();

        }else {
            if (textObj.setSelectionRange) {

                var rangeStart = textObj.selectionStart;
                var rangeEnd = textObj.selectionEnd;
                var tempStr1 = textObj.value.substring(0, rangeStart);
                var tempStr2 = textObj.value.substring(rangeEnd);
                textObj.value = tempStr1 + tagTpl + tempStr2;
				var len = tagTpl.length;
				if (selectAble) {
					textObj.setSelectionRange(rangeStart + 1, rangeStart + len - 1);
				}else{
					textObj.setSelectionRange(rangeStart + len, rangeStart + len);
				}
				textObj.focus();
            }else {
                if (document.all && textObj.createTextRange) {

                    textObj.value += tagTpl;
					var re = eval("/" + tagTpl + "/i");
					var startPos = textObj.value.search(re);
					var endPos = textObj.innerHTML.length;
					var endPosOffset = -(endPos - startPos - tagTpl.length) - 1;
					var range = textObj.createTextRange();
					var sel = range.duplicate();
					if (selectAble) {
						sel.moveStart("character", startPos + 1);
						sel.moveEnd("character", endPosOffset);
					} else {
						sel.move("character", endPos);
					}
					sel.select();
                } else {
                    textObj.value += tagTpl
                }
            }
        }
		
        return this;
		
    };

参考文章:(たくさんの文章を見て、やはりこちらのapiがぼやけているような気がします.次は本当にはっきりしてから更新します)
http://www.iteye.com/topic/749383
http://www.zhangxinxu.com/wordpress/?p=755
http://blog.csdn.net/qiaogang2003/archive/2007/11/06/1870025.aspx
http://hi.baidu.com/wangjiashui/blog/item/da1e4e6eabbe96dc80cb4a29.html
http://www.popo4j.com/article/Jquery-insert-content-at-the-cursor-position.html
http://hi.baidu.com/longtao_1986/blog/item/c95cae30fa666410ebc4afbb.html
http://aronlulu.iteye.com/blog/354467