javascript設置文本框光標的方法實例小結(jié)
本文實例總結(jié)了javascript設置文本框光標的方法。分享給大家供大家參考,具體如下:
對于text
//得到光標位置
function getCaret(textbox) {
var control = document.activeElement;
textbox.focus();
var rang = document.selection.createRange();
rang.setEndPoint("StartToStart",textbox.createTextRange())
control.focus();
return rang.text.length;
}
對于textarea
function getCaret(ZysrID)
{
var txb = document.getElementById(ZysrID);//根據(jù)ID獲得對象
var pos = 0;//設置初始位置
txb.focus();//輸入框獲得焦點,這句也不能少,不然后面會出錯,血的教訓啦.
var s = txb.scrollTop;//獲得滾動條的位置
var r = document.selection.createRange();//創(chuàng)建文檔選擇對象
var t = txb.createTextRange();//創(chuàng)建輸入框文本對象
t.collapse(true);//將光標移到頭
t.select();//顯示光標,這個不能少,不然的話,光標沒有移到頭.當時我不知道,搞了十幾分鐘
var j = document.selection.createRange();//為新的光標位置創(chuàng)建文檔選擇對象
r.setEndPoint("StartToStart",j);//在以前的文檔選擇對象和新的對象之間創(chuàng)建對象,媽的,不好解釋,我表達能力不算太好.有興趣自己去看msdn的資料
var str = r.text;//獲得對象的文本
var re = new RegExp("[//n]","g");//過濾掉換行符,不然你的文字會有問題,會比你的文字實際長度要長一些.搞死我了.我說我得到的數(shù)字怎么總比我的實際長度要長.
str = str.replace(re,"");//過濾
pos = str.length;//獲得長度.也就是光標的位置
r.collapse(false);
r.select();//把光標恢復到以前的位置
txb.scrollTop = s;//把滾動條恢復到以前的位置
}
設置光標函數(shù)
function setCaret(id,pos)
{
var textbox = document.all(id);
var r = textbox.createTextRange();
r.collapse(true);
r.moveStart('character',pos);
r.select();
}
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript利用normalizr實現(xiàn)復雜數(shù)據(jù)轉(zhuǎn)換
當我們需要進行數(shù)據(jù)轉(zhuǎn)換以便拆分和維護時,可以使用redux作者 Dan Abramov 編寫的normalizr來處理數(shù)據(jù),本文將為大家詳細講講其用法,感興趣的可以了解一下2022-07-07
javascript中的previousSibling和nextSibling的正確用法
這篇文章主要介紹了javascript中的previousSibling和nextSibling的正確用法的相關資料,需要的朋友可以參考下2015-09-09
微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化
由于微信支持的字體非常有限,不能滿足個性化的需求,因此在開發(fā)的過程中可能會需要使用自定義字體,下面這篇文章主要給大家介紹了關于微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化的相關資料,需要的朋友可以參考下2022-02-02

