如何用Javascript獲得TextArea中的游標位置

來源:互聯網
上載者:User
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();
}

  其實這個不難,但不知道的時候,會搞死人的。我為了實現這個效果,前前後後差不多試了五個小時,媽的。但願這個對一些兄弟有協助。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.