javascript|游標
小弟最近在寫一個線上編輯器,UBB版的,由於沒有使用快顯視窗,所以,在添加代碼的時候,只能添在TextArea的最後面,無法在游標之前插入,於是在網上瘋狂的找資料,工夫不負有心人,終於被我找到了如何獲得TextArea中的位置,但是如果TextArea中有很多內容的時候,會顯得很閃爍。其代碼如下。
function getPos(obj)
{
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
return len;
}
這時候問題出來了,在obj.select()的時候,會造成閃爍,並且捲軸也無法歸位。於是小弟根據自己的需要,將其改寫如下:
function getCaret(ZysrID)
{
var txb = document.getElementById(ZysrID);//根據ID獲得對象
var pos = 0;//設定初始位置
txb.focus();//輸入框獲得焦點,這句也不能少,不然後面會出錯,血的教訓啦.
var s = txb.scrollTop;//獲得捲軸的位置
var r = document.selection.createRange();//建立文檔選擇對象
var t = txb.createTextRange();//建立輸入框文字物件
t.collapse(true);//將游標移到頭
t.select();//顯示光線標,這個不能少,不然的話,游標沒有移到頭.當時我不知道,搞了十幾分鐘
var j = document.selection.createRange();//為新的游標位置建立文檔選擇對象
r.setEndPoint("StartToStart",j);//在以前的文檔選擇對象和新的對象之間建立對象,媽的,不好解釋,我表達能力不算太好.有興趣自己去看msdn的資料
var str = r.text;//獲得對象的文本
var re = new RegExp("[\\n]","g");//過濾掉分行符號,不然你的文字會有問題,會比你的文字實際長度要長一些.搞死我了.我說我得到的數字怎麼總比我的實際長度要長.
str = str.replace(re,"");//過濾
pos = str.length;//獲得長度.也就是游標的位置
r.collapse(false);
r.select();//把游標恢複到以前的位置
txb.scrollTop = s;//把捲軸恢複到以前的位置
}
//設定游標函數
function setCaret(id,pos)
{
var textbox = document.all(id);
var r = textbox.createTextRange();
r.collapse(true);
r.moveStart('character',pos);
r.select();
}
其實這個不難,但不知道的時候,會搞死人的。我為了實現這個效果,前前後後差不多試了五個小時,媽的。但願這個對一些兄弟有協助。