Email conversation
| From | Armand |
|---|
| To | Me |
|---|
| Subject | Problems with positioning in textarea! |
|---|
| Date | 2 February 2004 12:40 |
|---|
Hello Mark,
First of all, thank you for do this site!
(http://www.howtocreate.co.uk/tutorials/ ) it's very good, it helps me to
learn more about DHTML and JavaScript!
The problem is with textarea, do you know how i can positioning in it? i
can't find this information (in anyway)!
More or less i "solve" this problem with IE (i found some code in the
Web), but i don't know how i can solve it with Netscape (Mozilla).
(in this example, is to put some text (and smily for example :) ) in a
particular position give by the cursor)
This pice of code is very "criptic", i've to confess that i not
understand, but it run's. I think that IE, with caretPos "can" get
position of textarea, and then rest is dark for me... :_(
<textarea name="visor" cols="50" rows="4" wrap=virtual></textarea>
(input is document.fdisplay.visor, and insText = ':)' for example)
function addChar(input, insTexte)
{
startTag = '';
endTag = '';
if (input.createTextRange)
{
var text;
input.focus(input.caretPos);
input.caretPos = document.selection.createRange().duplicate();
if(input.caretPos.text.length>0)
{
input.caretPos.text = startTag + input.caretPos.text + endTag;
}
else
{
input.caretPos.text = startTag + insTexte + endTag;
}
}
else input.value += startTag + insTexte + endTag;
}
I need, if it's possible get more information with this, and put this
function to work in Netscape.
Thanks for your help!
-- Armand!
PD: Another code that you can look to have another point of view (more
comprensible) of the same idea, but it have the problem that you can
position a character in a specified position (with cursor) but then, the
cursor it positioned at the end...:
input.focus();
var sel = document.selection.createRange();
sel.collapse();
var sel_before = sel.duplicate();
var sel_after = sel.duplicate();
sel.moveToElementText(input);
sel_before.setEndPoint("StartToStart",sel);
sel_after.setEndPoint("EndToEnd",sel);
text_before = sel_before.text;
text_after = sel_after.text;
input.value = text_before + text_after + insTexte;
input.focus();
| From | Me |
|---|
| To | Armand |
|---|
| Subject | Re: Problems with positioning in textarea! |
|---|
| Date | 2 February 2004 13:51 |
|---|
Armand,
Are you saying that you want to find the position of the caret within a
textarea and insert text at the point in the textarea? If this is what you
want, this can be done in Netscape6/Mozilla, but will not work in Opera 7,
Safari 1.1, Konqueror 3.5.0, ICEbrowsers, Internet Explorer Mac etc.
[Ed. this also works in Opera 8+, Safari 1.2+, and Konqueror 3.5.2+]
use if( input.setSelectionRange ) to check if it is supported, then use:
textarea.selectionStart gives the position of the cursor or selection start
textarea.selectionEnd gives the position of the cursor or selection end
This will work in Netscape 7, Mozilla 1.3+ (it will work in earlier
versions, but not in textareas, just text inputs)
You can then use the textarea.value.subString method to get the contents of
either side.
I think you can then set the position using:
input.setSelectionRange(offset,offset)
hope this helps
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Me |
|---|
| To | Armand |
|---|
| Subject | solution to problems with positioning in textarea |
|---|
| Date | 2 February 2004 14:20 |
|---|
here, this should help you. This will work in Netscape 7+, Mozilla 1.3+,
Internet Explorer 5+ on Windows:
[Ed. this also works in Opera 8+, Safari 1.2+, and Konqueror 3.5.2+]
If you use a text input instead of a textarea, it will also work in
Netscape 6 and Mozilla 1.0.
It will NOT work in Opera 7, Safari 1.1, Konqueror 3.5.1, ICEbrowser or
Internet Explorer on Mac (it will just append the text to the end of the
textarea).
<script>
function addText( input, insText ) {
input.focus();
if( input.createTextRange ) {
document.selection.createRange().text += insText;
} else if( input.setSelectionRange ) {
var len = input.selectionEnd;
input.value = input.value.substr( 0, len )
+ insText + input.value.substr( len );
input.setSelectionRange(len+insText.length,len+insText.length);
} else { input.value += insText; }
}
</script>
<form onsubmit="return false;">
<textarea></textarea>
<input type="button" onclick="addText(this.form.elements[0],';)');"
value=":)">
</form>
Which produces:
| From | Armand |
|---|
| To | Me |
|---|
| Subject | [RE: solution to problems with positioning in textarea] (thanks!) |
|---|
| Date | 5 February 2004 12:05 |
|---|
Thank's for your time Mark!
I'm impressed of your code, and the way to make the things...
you solved my problem very quickly!
You let me thing about above's concepts! really! ;)
Have a good time! (my best wishes for your and your personal development!)
-- Armand!