...

View Full Version : detecting char position inside textArea



mat41
06-11-2004, 06:59 AM
Hello, I need help with the following function Please:


function saveCaret(elem)
{
if( elem.isTextEdit )
{
elem.caretPos = document.selection.createRange();
}
}

var selectionStartChar
function getCaretPos(elem)
{
if ( elem.isTextEdit && elem.caretPos )
{
var orig = elem.value;
alert (orig);
var bookmark = "~";
var caretPos = elem.caretPos;
caretPos.text = bookmark;
selectionStartChar = elem.value.search( bookmark );
window.status = "Caret is at character " + selectionStartChar;
//window.document.writeln ("Caret is at character " + selectionStartChar);
alert ("Users selection starts at char " + selectionStartChar + " (this is the selection we want to move)" );
elem.value = orig;
}

}



it gets called:

<textarea name="ta1" rows="13" cols="60" onSelect="saveCaret(this);">

<input name="btn" type="button" onclick="getCaretPos(ta1)" value="Move Selected Text">



What I am trying to achieve is to hold the 'selected value' at the same time as detecting the char position of the strat of the user selection. By the time it gets into the second function, to the line: alert (orig); my selection has been lost - I still get the char position I am looking for

Thank you in advance

Here is the complete cut n paste code .html. I have achieved some usefull functionality, please copy n run the page. My objective: there are two text areas. Each area has section headers EG:Issues (it will become clear if you run the page) what I am trying to do is: A user selects some text form a section, when they press the move text button, the text will be copied into the same section in the above textarea, (please dont let the length of the code put you off running it, i am not a js techo - i'm sure a techo will spot my error easily - alerts walk you thru what I have working, 95% is working!!) Here is what I have working. OnSelect of the second text area a function runs to createRange. Then on click of the moveText button four function run to detect the char positions of the sections, the first char of the user selected text string and what section it came from. When the last function runs to move the text - All of it moves, please help me - it would be hugely appreciated.

--------Thanking you in advance------------------start **** n paste code---------


<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
//make array global arrays so the elements maybe used in other functions
var myLabelsArray = new Array("EVENTS:","ISSUES:","VISITS:","REPUTATION:","MINISTERIALS:","PERSONNAL:","ACHIEVEMENTS:");
var myCharPositions = new Array(6);

//first function called:get position of section values (Events etc..) values
function getPosOfStringValues(elem)
{
var result;
var i = 0;
while (i <= 6)
{
result = elem.value.search(myLabelsArray[i]);
myCharPositions[i] = result;
alert (myLabelsArray[i] + " is at character " + myCharPositions[i])
i++;
}
}

//second function called, run on select of textarea:create range for position
function saveCaret(elem)
{
if( elem.isTextEdit )
{
elem.caretPos = document.selection.createRange();
}
}

//third function called:get char position for first char of selection
var selectionStartChar
function getCaretPos(elem)
{
if ( elem.isTextEdit && elem.caretPos )
{
var bookmark = "~";
var orig = elem.value;
var caretPos = elem.caretPos;
caretPos.text = bookmark;
selectionStartChar = elem.value.search( bookmark );
window.status = "Caret is at character " + selectionStartChar;
//window.document.writeln ("Caret is at character " + selectionStartChar);
alert ("Users selection starts at char " + selectionStartChar + " (this is the selection we want to move)" );
elem.value = orig;
}

}

//fourth function called: selectionStartChar = char pos of selection
function whereIsSelection()
{
if((selectionStartChar > myCharPositions[0]) && (selectionStartChar < myCharPositions[1]))
{
alert ("came from the section:" + myLabelsArray[0] + " needs to be copied into the same section in the above text area");
}
if((selectionStartChar > myCharPositions[1]) && (selectionStartChar < myCharPositions[2]))
{
alert ("came from the section:" + myLabelsArray[1] + " needs to be copied into the same section in the above text area");
}
if((selectionStartChar > myCharPositions[2]) && (selectionStartChar < myCharPositions[3]))
{
alert ("came from the section:" + myLabelsArray[2] + " needs to be copied into the same section in the above text area");
}
if((selectionStartChar > myCharPositions[3]) && (selectionStartChar < myCharPositions[4]))
{
alert ("came from the section:" + myLabelsArray[3] + " needs to be copied into the same section in the above text area");
}
if((selectionStartChar > myCharPositions[4]) && (selectionStartChar < myCharPositions[5]))
{
alert ("came from the section:" + myLabelsArray[4] + " needs to be copied into the same section in the above text area");
}
if((selectionStartChar > myCharPositions[5]) && (selectionStartChar < myCharPositions[6]))
{
alert ("came from the section:" + myLabelsArray[5] + " needs to be copied into the same section in the above text area");
}
if(selectionStartChar > myCharPositions[6])
{
alert ("came from the section:" + myLabelsArray[6] + " needs to be copied into the same section in the above text area");
}
}

//fifth and final function called
//code to swap selected text from textArea to textArea
var copyStr;
var lbr;
function moveSelection(where)
{
lbr='';
if (document.selection)
{
tmp=where.value;
alert (tmp);
sel = document.selection.createRange();
copyStr=sel.text;
document.selection.clear();
tmpx=where.value.replace(/\r\n/g,' ');
tmpy=tmp.replace(/\r\n/g,' ');
tmpz=tmpy.length-tmpx.length-copyStr.length;
for (var i=0;i<tmpz;i++)
{
lbr+='\r\n';
}
}
else if (where.selectionStart || where.selectionStart == '0')
{
var begin = where.selectionStart;
var end = where.selectionEnd;
copyStr=where.value.substring(begin,end);
where.value=where.value.substring(0,begin)+where.value.substring(end,where.value.length)
}
if(copyStr=="")
{
alert('No text selected to be moved!')
}
else
{
document.forms[0].briefString.value+=copyStr+lbr;
}
}


/*
//used for testing mt two global Arrays
//(array) myLabelsArray = actual section labels
//(array) myCharPositions = char locations of sections in forwarded brief(s)
//(var) selectionStartChar = char position at start of users selection (to move)
function testValues()
{
var i = 0
while (i <= 6)
{
alert (myLabelsArray[i] + " is at character " + myCharPositions[i])
i++;
}
}
*/
//-->
</script>
</head>
<body>
<form>
<textarea name="briefString" rows="13" cols="60">EVENTS:

ISSUES:

VISITS:

REPUTATION:

MINISTERIALS:

PERSONNAL:

ACHIEVEMENTS:</textarea>
<br><br>
<textarea name="ta1" rows="13" cols="60" onSelect="saveCaret(this);">
EVENTS:
eeeee eeeee eeeeee eeeeee
ISSUES:
iiiii iiiii iiiii iiiiii
VISITS:
vvvvv vvvvv vvvvv vvvvv
REPUTATION:
rrrrr rrrrrr rrrrr rrrrrr
MINISTERIALS:
mmmmm mmmmm mmmmm mmmmm
PERSONNAL:
ppppp ppppp ppppp ppppp
ACHIEVEMENTS:
aaaaa aaaaa aaaaa aaaaa
</textarea><br><br>
<input name="btn" type="button" onclick="getPosOfStringValues(ta1),getCaretPos(ta1),whereIsSelection(),moveSelection(this.form.ta1);" value="Move Selected Text">
<br><br>


</form>


</body>
</html>-----------------------------finish------------------------------------

Alex Vincent
06-11-2004, 11:38 PM
This thread doesn't belong in the Post a JavaScript forum. Could one of the moderators move it, please?

FYI, Mozilla does support selectionStart and selectionEnd(?) properties for HTML textareas. See bug 58850 @ bugzilla.mozilla.org for details.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum