TextArea相关操作

来源：互联网发布：有啥聊天软件编辑：程序博客网时间：2024/05/17 01:07

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="King">
<title>TextArea相关操作</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head>
<body onmousemove="window.status=event.x+','+event.y">
<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>
</p>
<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))
{
alert("请输入数字！");
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);
}

<SCRIPT language="javascript">
/**
* 返回指定行的range对象
* num为行号，areaId为textarea的id
*/
function getTextRange(num, areaId)
{
    var range = document.all(areaId).createTextRange();
    var rect = range.getClientRects();
    var left = rect[0].left;
    if (num > rect.length - 1 || num < 0)
    {
        return;
    }
    if (num == 0)
    {
       var right = rect[0].right;
       range.moveEnd("character", -range.text.length);
       while (range.offsetLeft + range.boundingWidth < right)
       {
           range.expand("character");
       }
       return range;
    }
    else
    {
        var right = rect[num].right;
        var range = getTextRange(num - 1, areaId);
        range.moveStart("character", range.text.length + 1);
        while (range.offsetLeft + range.boundingWidth < right)
        {
            range.expand("character");
        }
        if (range.offsetLeft > left)
        {
        range.moveStart("character", -1);
        }
        return range;
    }
}

function getText(num)
{
    var range = getTextRange(num, "area");
    if(range != null)
    {
        alert(range.text);
        range.select();
    }
}
</SCRIPT>
<TEXTAREA cols="50" rows="10" id="area">
客从东方来，衣上灞陵雨。客从东方来，衣上灞陵雨。
问客何为来，采山因买斧。
冥冥花正开，扬扬燕新乳。
昨别今已春，鬓丝生几缕。
</TEXTAREA><p>
<input type="button" onClick="getText(0)" value="选第一行">
<input type="button" onClick="getText(1)" value="选第二行">
<input type="button" onClick="getText(2)" value="选第三行">
<input type="button" onClick="getText(3)" value="选第四行">

<hr>

<textarea id="ice" rows="5" cols="35">怎样删除光标在textarea中的那一行？
就像VisualStudio中的剪切行的功能。
怎样删除光标在textarea中的那一行？
就像VisualStudio中的剪切行的功能。
怎样删除光标在textarea中的那一行？
就像VisualStudio中的剪切行的功能。</textarea>
<input type="button" onclick="delline()" value="delete"/>
<script language="javascript">
<!--
//存在一个问题：当回车在最后一列的时候，将光标定位到最后位置，文本会向左偏移，很头疼的问题。
function delline()
{
ice.focus();
var r1 = document.body.createTextRange();
var r2 = document.body.createTextRange();
var s = document.selection.createRange();
var re = ice.createTextRange().getClientRects();
var t = s.getBoundingClientRect().top;
var i, j;
for (i = 0; i < re.length; i++)
{
  if (re[i].top >= t)
  {
   break;
  }
}
if (i >= re.length) return;
r2.moveToPoint(re[i].left, re[i].top);//alert(re[i].left+":"+ice.offsetLeft);
r1.setEndPoint("StartToStart", r2);

for (j = i; j < re.length; j++)
{
  if (re[j].top >= t)
  {
   break;
  }
}
var offsetRight = ice.offsetLeft + (ice.style.borderLeftWidth == "" ? 0 : ice.style.borderLeftWidth) + ice.clientWidth;
r2.moveToPoint(offsetRight, re[j].top);
r1.setEndPoint("EndToStart", r2);
if (j < re.length - 1)
  r1.moveEnd("character", 1);

r1.text = "";
}
//-->
</script>
</body>
</html>