轉載地址:http://levi.cg.am/archives/1448
項目中客戶要求選擇商品后,光標直接定位到數量輸入框上,來簡化操作。
document.getElementById(“cargoCount”).focus();//定位光標到數量框
還有需求涉及到定位到第幾位字段上。
1234567 | function setMouse(){ var e = event.srcElement; var r = e.creatTextRange(); r.moveStart( 'character' ,2); r.collapse( true ); r.select(); } |
在IE瀏覽器下使用是createTextRange而Firefox/chrome等瀏覽器下使用setSelectionRange
IE:
1234 | var range = obj.createTextRange(); range.moveStart( "character" , 開始序號); range.moveEnd( "character" , 結束序號); range.select(); |
FF:
12 | obj.setSelectionRange(開始序號, 結束序號); obj.focus(); |
selectNode()獲取到的oRange1是<p id=”id1″><b>Hello</b>World</p>
selectNodeContent()獲取到的oRange2是<b>Hello</b>World
參考:
http://hi.baidu.com/wangjiashui/blog/item/da1e4e6eabbe96dc80cb4a29.html
http://www.zhangxinxu.com/wordpress/?p=755
http://blog.csdn.net/qiaogang2003/archive/2007/11/06/1870025.aspx
在項目開發中經常遇到input等設置光標位置到最后的問題,今天我查了一下Google,找到了在IE、Firefox、Opera等主流瀏覽器的獲取光標位置(getCursortPosition)以及設置光標位置(setCursorPosition)的函數。
function getCursortPosition (ctrl) {//獲取光標位置函數
var CaretPos = 0;// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
PS:參數ctrl為input或者textarea對象
function setCaretPosition(ctrl, pos){//設置光標位置函數
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
PS:參數ctrl為input或者textarea對象,pos為光標要移動到的位置。
$(“#siteUrl”).val(‘http://’);
$(“#siteUrl”).focus();
IE6下光標會定位在前面:
而將兩行代碼換過來:
$(“#siteUrl”).focus();
$(“#siteUrl”).val(‘http://’);
IE6下光標會定位在后面:
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。