光标位置 textarea

最新推荐文章于 2023-12-20 00:19:31 发布

qij2256

最新推荐文章于 2023-12-20 00:19:31 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： character input function button microsoft generator

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<html>
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">
<meta   name="ProgId"   content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border:   1   solid   #000000}
BODY,TABLE{font-size:   10pt}
</style>
</head>
<body>
<table   border="0"   width="700"   cellspacing="0"   cellpadding="0">
<tr>
<td   width="479"   rowspan="7">
点击   TextArea   实现光标定位
<p>
<textarea   rows="7"   cols="49"   id="box"   οnclick=tellPoint() >我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>

<script>

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",-1)
rng.moveEnd("character",1)
rng.select()
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"   οnclick="movePoint()"   value="移动光标到指定位置">
<p></p>
选择指定范围：<input   type="text"   size="9"   id="sbox">   --   <input   type="text"   size="9"   id="ebox">   <input   type="button"   οnclick="selectText(sbox.value,ebox.value)"   value="选择">
<p></p>
选择查找字符   ：<input   type="text"   value=""   id="cbox"   size="8">   <input   type="button"   οnclick="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>
<td   width="217">text: <span   style="position:   absolute;   z-index:   10"   id="t"></span>   </td>
</tr>
</table>
</body>

</html>