PDA

Click to See Complete Forum and Search --> : enter text at cursor in textarea

trouvailles
08-25-2003, 08:41 AM
Hi,

How can I modify this script so that it enters the letter at the cursor and not at the end of the text?

Thanks

Pierre

function accent(val) {
document.plaintext.message.value+=val;
document.plaintext.message.focus();
}
document.plaintext.message.focus();

----

<input type="button" name="é" value="é" onclick=accent("é")>
Khalid Ali
08-25-2003, 09:15 AM
I created a cross browser solution few days back for this topic.

Here is the direct link to that page

http://www.webapplikations.com/pages/html_js/forms/InserTextAtCursorIntoTextArea.html
trouvailles
08-25-2003, 10:34 AM
Thanks for your reply. I should have given more details about what I'm trying to do.

I have another page with buttons on the side that another person helped me with:

http://fslactivities.sd61.bc.ca/texteditor/

I'm trying to do the same in plain text on the following page:

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/plaintext.html

Pierre
Khalid Ali
08-25-2003, 12:26 PM
I am sure the solution I recomended is applicable in most of the situations..
trouvailles
08-25-2003, 01:10 PM
Thanks Khalid,

I'm getting there:

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/insertchar.html

I can't figure out why there's some space and at the beginning of the textarea when I load the page.

Also, what should I change so that the cursor goes back to the textarea by itself.

Thanks again for your help. Pierre

Here's the code I used:

<html>
<head>
<script type="text/javascript">
/**************************************************************************************
Author : Khalid Ali
Date : August 20, 2003
Version : 1.1
Company : webapplikations inc. http://www.webapplikations.com
The code provided here is copy righted material and belongs to the
webapplikations.com inc. It is provided as a service for our visitors.
It can be used without permission provided that this notification
does appear at the top.
Description : Well finally, I thought there are so many people who are using this
functionality and asking questions about it in forums,then there
should be a straight forward solution which can be used for both
Mozilla and IE browsers.

***************************************************************************************/
<!--
/**
@param textObj could be a text area or a text field
Only required for IE
*/
function setCaret (textObj) {
if (textObj.createTextRange) {
textObj.caretPos = document.selection.createRange().duplicate();
}
}

/**
@param textObj could be a text area or a text field
@param text field value that needs to be inserted in
*/
function insertAtCaret (textObj, textFeildValue) {
if(document.all){
if (textObj.createTextRange && textObj.caretPos) {
var caretPos = textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?textFeildValue + ' ' : textFeildValue;
}else{
textObj.value = textFeildValue;
}
}else{
if(textObj.setSelectionRange){
var rangeStart = textObj.selectionStart;
var rangeEnd = textObj.selectionEnd;
var tempStr1 = textObj.value.substring(0,rangeStart);
var tempStr2 = textObj.value.substring(rangeEnd);
textObj.value = tempStr1 + textFeildValue + tempStr2;
}else{
alert("This version of Mozilla based browser does not support setSelectionRange");
}
}
}
//-->
</script>

</head>

<body>

<form id="plaintext" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="message" rows="10" cols="20" onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);" >
</textarea>
<br/>
<input type="button" name="é" value="é" onclick="insertAtCaret(this.form.message,this.form.é.value);"/>

<input type="button" name="à" value="à" onclick="insertAtCaret(this.form.message,this.form.à.value);"/>

</p>
</form>


</body>
</html>
Khalid Ali
08-25-2003, 01:25 PM
set the focus to the text area

locate this line

textObj.value = tempStr1 + textFeildValue + tempStr2;

and add this line

textObj.focus();

and to remove the line feed you have to make sure your text area html looks like this


<textarea name="message" rows="10" cols="20" onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);" ></textarea>
trouvailles
08-25-2003, 01:50 PM
textObj.focus(); didn't do it. The cursor doesn't go back to the textbox by itself:

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/insertchar.html

I'm pretty embarassed about the second question.
trouvailles
08-25-2003, 03:18 PM
Things seem to work on my test page:

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/plaintextINSERCHAR.html

Still 2 things I would like to change:

- cursor that should go back to the textarea after clicking on a letter with an accent (bottom)

- content should not be erased if you forget to put cursor in textarea before clicking on a letter (bottom)

Pierre
trouvailles
08-25-2003, 03:54 PM
I just realized what happens on my test page. Only the letters the accents stay. As soon as you press a button, all the other letters disappear.

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/plaintextINSERCHAR.html
Khalid Ali
08-25-2003, 04:12 PM
you must have screwe up in the code something,because thats not right.Make sure you do follow the code example from the link I gave you earlier.
trouvailles
08-26-2003, 08:00 AM
Thanks for you help Khalid. There was a conflict with another script. Here's the page:

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/plaintext.html

- I still can't get the cursor to go back to the textbox.
- When the page first loads, the content shouldn't get erased if you click on one of the accentued letters without clicking in the extarea first.

Pierre
trouvailles
08-27-2003, 09:31 AM
Both problems solved.

http://fslactivities.sd61.bc.ca/ezHTMLarea/popups/plaintext.html

Thanks Khalid for the script.
Khalid Ali
08-27-2003, 09:37 AM
you are welcome..:D