欢迎光临
我们一直在努力

用JavaScript实现的文本框光标定位-ASP教程,客户端相关

建站超值云服务器,限时71元/月

<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" onclick=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",-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:&nbsp;<span id="bh"></span></td>

</tr>

<tr>

<td width="217">boundingwidth:&nbsp;<span id="bw"></span></td>

</tr>

<tr>

<td width="217">boundingtop:&nbsp;<span id="bt"></span></td>

</tr>

<tr>

<td width="217">boundingleft:&nbsp;<span id="bl"></span></td>

</tr>

<tr>

<td width="217">offsetleft:&nbsp;<span id="ol"></span> </td>

</tr>

<tr>

<td width="217">offsettop:&nbsp;<span id="ot"></span> </td>

</tr>

<tr>

<td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td>

</tr>

</table>

</body>

</html>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 用JavaScript实现的文本框光标定位-ASP教程,客户端相关
分享到: 更多 (0)