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

來源:互聯網
上載者:User
寫一個線上編輯器,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.