JavaScript中文本光標定位

本文转载自 abxn2002 查看原文 2015-01-15 5 java/ 定位/ 前端学习笔记/ 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();`

//DOM Level 2中定義了方法creatRange()來創建范圍
var oRange = document.createRange();
DOM下selectNode和selectNodeContent方法
HelloWorld
var oRange1 = document.createRange();
var oRange2 = document.createRnage();
var oP1 = document.getElementById(“id1″);
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);

selectNode()獲取到的oRange1是HelloWorld
selectNodeContent()獲取到的oRange2是HelloWorld

參考：
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，找到了在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為光標要移動到的位置。

jQuery中光標定位

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

IE6下光標會定位在前面：

而將兩行代碼換過來：

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

IE6下光標會定位在后面：

注意！

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

文本打印和光標定位將光標定位到文本的末尾(轉) 如何用javascript控制光標定位到文本域的指定位置？ javascript中的focus()光標定位 JavaScript Iframe富文本編輯器中的光標定位 JS控制光標定位，定位到文本的某個位置光標定位，隱藏光標如何給JTextArea的光標定位關於maskedtextbox的光標定位怎樣把文本框中的光標定位在文字的最后？