js实现光标定位

2023-03-04 08:40:02JavaScript020

js实现光标定位,第1张

<html>

<head>

<style>

INPUT{border: 1 solid #000000}

BODY,TABLE{font-size: 10pt}

</style>

</head>

<body>

<tr>

点击 TextArea 实现光标定位

<p>

<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸

为了你我愿意

动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离

如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹

也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里

我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离

</textarea>

function movePoint()

{

var pn = parseInt(pnum.value)

if(isNaN(pn))

return

var rng = box.createTextRange()

rng.moveStart("character",pn)

rng.collapse(true)

rng.select()

returnCase(rng)

}

function tellPoint()

{

var rng = event.srcElement.createTextRange()

rng.moveToPoint(event.x,event.y)

rng.moveStart("character",-event.srcElement.value.length)

pnum.value = rng.text.length

returnCase(rng)

}

function returnCase(rng)

{

bh.innerText = rng.boundingHeight

bl.innerText = rng.boundingLeft

bt.innerText = rng.boundingTop

bw.innerText = rng.boundingWidth

ot.innerText = rng.offsetTop

ol.innerText = rng.offsetLeft

t.innerText = rng.text

}

function selectText(sp,ep)

{

sp = parseInt(sp)

ep = parseInt(ep)

if(isNaN(sp)||isNaN(ep))

return

var rng = box.createTextRange()

rng.moveEnd("character",-box.value.length)

rng.moveStart("character",-box.value.length)

rng.collapse(true)

rng.moveEnd("character",ep)

rng.moveStart("character",sp)

rng.select()

returnCase(rng)

}

var rg = box.createTextRange()

function findText(tw)

{

if(tw=="")

return

var sw = 0

if(document.selection)

{

sw = document.selection.createRange().text.length

}

rg.moveEnd("character",box.value.length)

rg.moveStart("character",sw)

if(rg.findText(tw))

{

rg.select()

returnCase(rg)

}

if(rg.text!=tw)

{

alert("已经搜索完了")

rg = box.createTextRange()

}

</script>

</p>

<p></p>

光标位置：<input type="text" value="0" id="pnum" size="8"><input type="button" onclick="movePoint()" value="移动光标到指定位置">

<p></p>

选择指定范围：<input type="text" size="9" id="sbox">-- <input type="text" size="9" id="ebox"><input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">

<p></p>

选择查找字符：<input type="text" value="" id="cbox" size="8"><input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">

</td>

<td width="217">boundingHeight: <span id="bh"></span></td>

</tr>

<tr>

<td width="217">boundingWidth: <span id="bw"></span></td>

</tr>

<tr>

<td width="217">boundingTop: <span id="bt"></span></td>

</tr>

<tr>

<td width="217">boundingLeft: <span id="bl"></span></td>

</tr>

<tr>

<td width="217">offsetLeft: <span id="ol"></span></td>

</tr>

<tr>

<td width="217">offsetTop: <span id="ot"></span></td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

当使用JavaScript点击元素，但光标不移动时，可能是因为没有正确设置光标位置。可以通过设置光标位置来解决这个问题，例如，可以使用JavaScript的selectionStart和selectionEnd属性来设置光标的位置。另外，也可以使用JavaScript的focus()方法来设置光标的位置，这样就可以让光标移动到指定的位置。此外，也可以使用CSS的cursor属性来设置光标的位置，这样就可以让光标移动到指定的位置。总之，只要正确设置光标位置，就可以解决JavaScript点击元素时光标不移动的问题。

1、获取光标位置

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