JavaScript中文本光標定位


轉載地址:http://levi.cg.am/archives/1448


項目中客戶要求選擇商品后,光標直接定位到數量輸入框上,來簡化操作。

document.getElementById(“cargoCount”).focus();//定位光標到數量框
還有需求涉及到定位到第幾位字段上。

1234567 functionsetMouse(){vare = event.srcElement;varr = e.creatTextRange();r.moveStart('character',2);r.collapse(true);r.select();}

在IE瀏覽器下使用是createTextRange而Firefox/chrome等瀏覽器下使用setSelectionRange

IE:

1234 varrange = obj.createTextRange();range.moveStart("character", 開始序號);range.moveEnd("character", 結束序號);range.select();

FF:

12 obj.setSelectionRange(開始序號, 結束序號);obj.focus();

 

  1. //DOM Level 2中定義了方法creatRange()來創建范圍
  2. var oRange = document.createRange();
  3. DOM下selectNode和selectNodeContent方法
  4. <p id=”id1″><b>Hello</b>World</p>
  5. var oRange1 = document.createRange();
  6. var oRange2 = document.createRnage();
  7. var oP1 = document.getElementById(“id1″);
  8. oRange1.selectNode(oP1);
  9. oRange2.selectNodeContents(oP1);

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

 

javascript獲取光標位置以及設置光標位置

在項目開發中經常遇到input等設置光標位置到最后的問題,今天我查了一下Google,找到了在IEFirefoxOpera等主流瀏覽器的獲取光標位置(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為光標要移動到的位置。

 

jQuery中光標定位

$(“#siteUrl”).val(‘http://’);
$(“#siteUrl”).focus();

IE6下光標會定位在前面:

image

而將兩行代碼換過來:

$(“#siteUrl”).focus();
$(“#siteUrl”).val(‘http://’);

IE6下光標會定位在后面:

image




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com