<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="17">
點擊 TextArea 實現光標定位
<p>
<input type="Button" value="ff" onclick="fo()"/>
<input type="Button" value="UPLINE" onclick="upLine()"/>
<input type="Button" value="DOWNLINE" onclick="downLine()"/>
<textarea rows="17" cols="49" id="box" onclick="tellPoint()" >
HIGHHEEL
sfsfsfs
s1123
432434
asf
fsa
sf
3232</textarea>
<script type="text/javascript">
function getPos(textarea) {
var rangeData = {text: "", start: 0, end: 0 };
if (textarea.setSelectionRange) { // W3C
textarea.focus();
rangeData.start= textarea.selectionStart;
rangeData.end = textarea.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
} else if (document.selection) { // IE
textarea.focus();
var i,
oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea);
rangeData.text = oS.text;
rangeData.bookmark = oS.getBookmark();
// object.moveStart(sUnit [, iCount])
// Return Value: Integer that returns the number of units moved.
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '/r' ) {
i ++;
}
}
rangeData.start = i;
rangeData.end = rangeData.text.length + rangeData.start;
}
return rangeData;
}
function fo(){
var text = new String(document.getElementById("box").value);
var currentCurrosr = document.getElementById("pnum").value;
alert(text.substring(currentCurrosr-1, currentCurrosr));
pos = getPos(document.getElementById("box"));
alert(pos.start);
// var end = text.indexOf("\r\n", document.getElementById("pnum").value);
// if(end == -1){
// alert("END");
// }
// var start = text.lastIndexOf("\r\n", currentCurrosr);
// if(start == -1){alert("START");}
// var currentLine = getLine(currentCurrosr);
// alert("CUL"+currentLine+"L"+currentLine.length);
// var nextLine = getLine(end + 1);
// alert("NEXT"+nextLine+"L"+nextLine.length);
// var preLine = getLine(start - 1);
// alert("PRE"+ preLine+"L"+preLine.length);
}
function upLine(){
var text = new String(document.getElementById("box").value);
var currentCurrosr = document.getElementById("h1").value;
var end = text.indexOf("\r\n",currentCurrosr);
var start = null;
if(currentCurrosr == end){
start =text.lastIndexOf("\r\n", currentCurrosr-1);
}else{
start = text.lastIndexOf("\r\n", currentCurrosr);
}
if(start == -1){alert("Already the toppest!");
return;
}
var preLine = getLine(start-1);
var currentLine = getLine(currentCurrosr);
var preLineStart = text.lastIndexOf("\r\n", start-1);
var sq = null;
var endPart = text.substring(end,text.length);
alert(text.length);
if(preLineStart == -1){
sq = new String(currentLine).substring(2, currentLine.length).concat("\r\n").concat(preLine).concat(endPart);
alert(sq);
alert(sq.length);
}else{
alert(preLineStart);
sq = text.substring(0, preLineStart).concat(currentLine).concat(preLine).concat(endPart);
alert(sq);
alert(sq.length);
}
document.getElementById("box").value=sq;
}
function downLine(){
}
function getLine(currsor){
var text = new String(document.getElementById("box").value);
var end = text.indexOf("\r\n", currsor);
if(end == -1){
return text.substring(text.lastIndexOf("\r\n", text.length), text.length);
}
var tmp = text.substring(0, end);
var start = tmp.lastIndexOf("\r\n", end);
if(start == -1){
}
// alert(tmp);
// alert(start);
// alert(text.substring(start+4, end).length);
// alert(text.substring(start+4, end));
return text.substring(start, end);
}
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)
h1.value=rng.text.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="hidden" id="h1">
光標位置：<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>
<td width="217">text: <span style="position: absolute; z-index: 10" id="t" ></span> </td>
</tr>
</table>
</body>
</html>