请问，怎么取得光标在input中的位置
日期：2014-05-16 浏览次数：20360 次
请教，如何取得光标在input中的位置？
input type=text
input 中有文本： "abcdefg "
光标停在d和e中间，即d|e，
我想取得 "abcd "，要如何做到呢？
另：在非IE中，如何取得input中选中的文本呢？比如说：firefox中如何取得？
我试过用window.getSelection不行。
------解决方案--------------------
here I give you an example that how to get the cursor 's position in input
<html>
<script>
var sb = new Array(
'leftbox ', 'rightbox ', 'scrollLeft ', 'scrollRight '
)
for (var i in sb) eval( 'var ' + sb[i] + ' = {} ')
var os = 0
var oe = 0
function update(o) {
var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o)
if (s == os && e == oe) return
rightbox.value = scrollRight.firstChild.nodeValue = t.substring(s).replace(/ /g, '\xa0 ') || '\xa0 '
leftbox.value = scrollLeft.firstChild.nodeValue = t.substring(0, s).replace(/ /g, '\xa0 ') || '\xa0 '
os = s
oe = e
return true
}
function setup() {
for (var i in sb) eval(sb[i] + ' = document.getElementById(sb[i]) ')
}
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveEnd( 'character ', o.value.length)
if (r.text == ' ') return o.value.length
return o.value.lastIndexOf(r.text)
} else return o.selectionStart
}
function getSelectionEnd(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveStart( 'character ', -o.value.length)
return r.text.length
} else return o.selectionEnd
}
</script>
<body onload= "setup() ">
<div>
<p> <input class= "input " value= "This is an example "
onclick= "return(update(this)) "
onkeyup= "return(update(this)) "
onkeydown= "return(update(this)) "
onkeypress= "return(update(this)) "
onmouseup= "return(update(this)) "
onmousedown= "return(update(this)) " /> </p>
</div>
<p>
<input id= "leftbox " maxlength= "32 " value= "TEST " disabled /> <input id= "rightbox " maxlength= "32 " value= "TEST " disabled />
</p>
<p>
<span id= "scrollLeft "> left </span> |
<span id= "scrollRight "> right </span>
</p>
</body>
</html>
input type=text
input 中有文本： "abcdefg "
光标停在d和e中间，即d|e，
我想取得 "abcd "，要如何做到呢？
另：在非IE中，如何取得input中选中的文本呢？比如说：firefox中如何取得？
我试过用window.getSelection不行。
------解决方案--------------------
here I give you an example that how to get the cursor 's position in input
<html>
<script>
var sb = new Array(
'leftbox ', 'rightbox ', 'scrollLeft ', 'scrollRight '
)
for (var i in sb) eval( 'var ' + sb[i] + ' = {} ')
var os = 0
var oe = 0
function update(o) {
var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o)
if (s == os && e == oe) return
rightbox.value = scrollRight.firstChild.nodeValue = t.substring(s).replace(/ /g, '\xa0 ') || '\xa0 '
leftbox.value = scrollLeft.firstChild.nodeValue = t.substring(0, s).replace(/ /g, '\xa0 ') || '\xa0 '
os = s
oe = e
return true
}
function setup() {
for (var i in sb) eval(sb[i] + ' = document.getElementById(sb[i]) ')
}
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveEnd( 'character ', o.value.length)
if (r.text == ' ') return o.value.length
return o.value.lastIndexOf(r.text)
} else return o.selectionStart
}
function getSelectionEnd(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveStart( 'character ', -o.value.length)
return r.text.length
} else return o.selectionEnd
}
</script>
<body onload= "setup() ">
<div>
<p> <input class= "input " value= "This is an example "
onclick= "return(update(this)) "
onkeyup= "return(update(this)) "
onkeydown= "return(update(this)) "
onkeypress= "return(update(this)) "
onmouseup= "return(update(this)) "
onmousedown= "return(update(this)) " /> </p>
</div>
<p>
<input id= "leftbox " maxlength= "32 " value= "TEST " disabled /> <input id= "rightbox " maxlength= "32 " value= "TEST " disabled />
</p>
<p>
<span id= "scrollLeft "> left </span> |
<span id= "scrollRight "> right </span>
</p>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
