rfila
asked on
Move Cursor to the end of selected textarea
Hi
I am trying to create a textarea which when clicked on will add the current date, time & username. I have got that working fine but after adding the data to the textarea the cursor always moves back to the beginning. Can anyone point me in the direction of the function or functions I can use to move the cursor to the end of the textarea ?
Thanks
Richard
Current Code to have cursor move commands added to it :
<script language="javascript">
function addupdate()
{
document.testform.testbox.
}
</script>
<form method="POST" name="testform">
<textarea rows="14"
name="testbox" cols="41" onFocus="addupdate();">LAL
LAALALAL
LALADsefgfsdgdf
</textarea>
</form>
I am trying to create a textarea which when clicked on will add the current date, time & username. I have got that working fine but after adding the data to the textarea the cursor always moves back to the beginning. Can anyone point me in the direction of the function or functions I can use to move the cursor to the end of the textarea ?
Thanks
Richard
Current Code to have cursor move commands added to it :
<script language="javascript">
function addupdate()
{
document.testform.testbox.
}
</script>
<form method="POST" name="testform">
<textarea rows="14"
name="testbox" cols="41" onFocus="addupdate();">LAL
LAALALAL
LALADsefgfsdgdf
</textarea>
</form>
have you tried focus ?
ASKER
Well I have now (code enclosed) and still the cursor moves to the beginning:
<script language="javascript">
function addupdate(refuser)
{
refuser.value=refuser.valu
refuser.focus();
}
</script>
<script language="javascript">
function addupdate(refuser)
{
refuser.value=refuser.valu
refuser.focus();
}
</script>
try this :
<TEXTAREA name="message" cols=50 rows=7 wrap="soft" scrolling="no"
onselect="store(this);" onclick="store(this);" onkeyup="store(this);" onchange="store(this);"></
<script language="javascript">
<!--
function store(ftext) {
if (ftext.createTextRange) {
ftext.caretPos = document.selection.createR
}
}
function AddText(Msg)
{
if (document.frmPostMsg.messa
var caretPos = document.testform.message.
caretPos.text = Msg;
} else {
document.testform.message.
}
document.testform.message.
}
function getText() {
if (document.frmPostMsg.messa
return document.testform.message.
} else {
return '';
}
}
function addupdate()
{
AddText("\nThu 7/8/2003 RF: ");
}
//-->
</script>
It work for me. Hope that solve your problems.
Regards
x_com
<TEXTAREA name="message" cols=50 rows=7 wrap="soft" scrolling="no"
onselect="store(this);" onclick="store(this);" onkeyup="store(this);" onchange="store(this);"></
<script language="javascript">
<!--
function store(ftext) {
if (ftext.createTextRange) {
ftext.caretPos = document.selection.createR
}
}
function AddText(Msg)
{
if (document.frmPostMsg.messa
var caretPos = document.testform.message.
caretPos.text = Msg;
} else {
document.testform.message.
}
document.testform.message.
}
function getText() {
if (document.frmPostMsg.messa
return document.testform.message.
} else {
return '';
}
}
function addupdate()
{
AddText("\nThu 7/8/2003 RF: ");
}
//-->
</script>
It work for me. Hope that solve your problems.
Regards
x_com
som mistake at
function AddText(Msg)
{
if (document.frmPostMsg.messa
change to :
function AddText(Msg)
{
if (document.testform.message
function AddText(Msg)
{
if (document.frmPostMsg.messa
change to :
function AddText(Msg)
{
if (document.testform.message
ASKER
Hi
That dosn't really help much - the script is all wrong and far too complicated. Surely it is a small job moving the cursor to the end of the line ?
That dosn't really help much - the script is all wrong and far too complicated. Surely it is a small job moving the cursor to the end of the line ?
hi rfila
Try this :
Full source code :
Test.html
==============
<html>
<head>
<script language="javascript">
<!--
function store(ftext) {
if (ftext.createTextRange) {
ftext.caretPos = document.selection.createR
}
}
function AddText(Msg)
{
if (document.testform.message
var caretPos = document.testform.message.
caretPos.text = Msg;
} else {
document.testform.message.
}
document.testform.message.
}
function getText() {
if (document.testform.message
return document.testform.message.
} else {
return '';
}
}
function addupdate()
{
AddText("\nThu 7/8/2003 RF: ");
}
//-->
</script>
</head>
<body>
<form name="testform">
<TEXTAREA name="message" cols=50 rows=7 wrap="soft" scrolling="no"
onselect="store(this);" onclick="store(this);" onkeyup="store(this);" onchange="store(this);">
TESTING TESTING TESTING
</TEXTAREA><br><br>
<input type="button" onClick="javascript:addupd
</form>
</body>
</html>
Hope that solve.
Regards
x_com
Try this :
Full source code :
Test.html
==============
<html>
<head>
<script language="javascript">
<!--
function store(ftext) {
if (ftext.createTextRange) {
ftext.caretPos = document.selection.createR
}
}
function AddText(Msg)
{
if (document.testform.message
var caretPos = document.testform.message.
caretPos.text = Msg;
} else {
document.testform.message.
}
document.testform.message.
}
function getText() {
if (document.testform.message
return document.testform.message.
} else {
return '';
}
}
function addupdate()
{
AddText("\nThu 7/8/2003 RF: ");
}
//-->
</script>
</head>
<body>
<form name="testform">
<TEXTAREA name="message" cols=50 rows=7 wrap="soft" scrolling="no"
onselect="store(this);" onclick="store(this);" onkeyup="store(this);" onchange="store(this);">
TESTING TESTING TESTING
</TEXTAREA><br><br>
<input type="button" onClick="javascript:addupd
</form>
</body>
</html>
Hope that solve.
Regards
x_com
ASKER
kind of works - cursor moves to beginning of addition - what about the gettext function - it isnt being used ???
hi rfila,
you may eliminate the getText function. I used it for debug purpose in order to solve your problems.
So, solve the problems?
x_com
you may eliminate the getText function. I used it for debug purpose in order to solve your problems.
So, solve the problems?
x_com
This kind of test --
if (document.testform.message
is IE specific and does not work in other browsers. If that's what you want, fine, however, why not do it much simpler --
just get the string name of the text area and do string.append(" ");
appending a space to the end sets the cursor to the end of the string, it's that simple!
if (document.testform.message
is IE specific and does not work in other browsers. If that's what you want, fine, however, why not do it much simpler --
just get the string name of the text area and do string.append(" ");
appending a space to the end sets the cursor to the end of the string, it's that simple!
ASKER
that sounds like what i am looking for - it only needs to work in IE - however, neither of the following examples work !
<script language="javascript">
function stamptoday(usethis)
{
usethis.append("\nThu 07/08/2003 RF:");
}
</script>
<textarea rows="14" name="testbox" cols="41" onFocus="stamptoday(this.v
<textarea rows="14" name="testbox" cols="41" onFocus="stamptoday(this);
<script language="javascript">
function stamptoday(usethis)
{
usethis.append("\nThu 07/08/2003 RF:");
}
</script>
<textarea rows="14" name="testbox" cols="41" onFocus="stamptoday(this.v
<textarea rows="14" name="testbox" cols="41" onFocus="stamptoday(this);
OK, if you know what you want to add, it's a lot simpler --
newString = usethis + "\nThu 07/08/2003 RF:";
will just add the value in quotes to the end of the string --
then to get back --
usethis = newString;
or all in one line ---
usethis = usethis + "\nThu 07/08/2003 RF:"; --which adds and reassigns at the same time.
or
usethis += "\nThu 07/08/2003 RF:"; -- that looks wierd, but it supposedly adds and appends at the same time.
newString = usethis + "\nThu 07/08/2003 RF:";
will just add the value in quotes to the end of the string --
then to get back --
usethis = newString;
or all in one line ---
usethis = usethis + "\nThu 07/08/2003 RF:"; --which adds and reassigns at the same time.
or
usethis += "\nThu 07/08/2003 RF:"; -- that looks wierd, but it supposedly adds and appends at the same time.
BTW -- what I gave you works in all browsers, nothing IE specific.
ASKER
Yes that's all well and good but what about the cursor ? The whole point of this thread is to get the cursor to be at the end of the textbox after the new data has been added to it.
<html>
<head>
<script language="javascript">
function stamptoday(usethis)
{
usethis.value += "\nThu 07/08/2003 RF:";
}
</script>
</head>
<body>
<form method="POST" name="testingthisform" action="--WEBBOT-SELF--">
<p><textarea rows="14" name="testarea1" cols="41" onfocus="stamptoday(this);
</p>
</form>
</body>
</html>
<html>
<head>
<script language="javascript">
function stamptoday(usethis)
{
usethis.value += "\nThu 07/08/2003 RF:";
}
</script>
</head>
<body>
<form method="POST" name="testingthisform" action="--WEBBOT-SELF--">
<p><textarea rows="14" name="testarea1" cols="41" onfocus="stamptoday(this);
</p>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Any updates, rfila?
Regards
x_com
Regards
x_com
ASKER
This method works perfectly and is a sensible length too.
I reworked the script as below to insert date and initials upon focus of a textarea. Obviously I have just keyed the date but I will use PHP to put that in later. Thanks sciwriter !
<html>
<head>
<SCRIPT>
function setCaretToEnd (el) {
if (el.createTextRange) {
var v = el.value;
var r = el.createTextRange();
r.moveStart('character', v.length);
r.select();
}
}
function insertAtEnd (el, txt) {
el.value += txt;
setCaretToEnd (el);
}
</SCRIPT>
</head>
<body>
<form method="POST" name="testingthisform" action="--WEBBOT-SELF--">
<p><textarea rows="14" name="testarea1" cols="41" onFocus="insertAtEnd (this.form.testarea1, 'Thu 31/07/2003, RF:');"
>Text here in this box</textarea>
</p>
</form>
</body>
</html>
I reworked the script as below to insert date and initials upon focus of a textarea. Obviously I have just keyed the date but I will use PHP to put that in later. Thanks sciwriter !
<html>
<head>
<SCRIPT>
function setCaretToEnd (el) {
if (el.createTextRange) {
var v = el.value;
var r = el.createTextRange();
r.moveStart('character', v.length);
r.select();
}
}
function insertAtEnd (el, txt) {
el.value += txt;
setCaretToEnd (el);
}
</SCRIPT>
</head>
<body>
<form method="POST" name="testingthisform" action="--WEBBOT-SELF--">
<p><textarea rows="14" name="testarea1" cols="41" onFocus="insertAtEnd (this.form.testarea1, 'Thu 31/07/2003, RF:');"
>Text here in this box</textarea>
</p>
</form>
</body>
</html>