Forum:

HTML Pages with CSS and JavaScript

To add outer text in middle of any text area.

Greenhorn

Posts: 26

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
I am making an application in which there is text area, where I insert some text. And there are few buttons representing some symbols to be added in the text area(Like we add Instant Graemlins in JavaRanch-Add New Topic, but it is appended to the text). I want to add in middle of text or at starting or at the end of text. How to deal with this.
with regards
Pashmina

Chris Baron

Ranch Hand

Posts: 1061

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Pashi,

<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function markSelection ( txtObj ) {
 if ( txtObj.createTextRange ) {
   txtObj.caretPos = document.selection.createRange().duplicate();
   isSelected = true;
 }
}
function insertTag ( txtName, tag )
{
 if ( isSelected ) {
   var txtObj = eval( "document.form1." + txtName );
   if (txtObj.createTextRange && txtObj.caretPos) {
     var caretPos = txtObj.caretPos;
     caretPos.text =  tag + caretPos.text;
     markSelection ( txtObj );
     if ( txtObj.caretPos.text=='' ) {
       isSelected=false;
    txtObj.focus();
     }
   }
 }
}
</script>
<form name="form1">
<textarea name="tArea"
          rows="6" cols="40"
          onSelect="markSelection(this);"
          onClick="markSelection(this);"
          onKeyup="markSelection(this);">
</textarea>
<br>
<input type="button"
       value="Smile"
       onClick="insertTag ( 'tArea', '    :)     ' )">
<input type="button"
       value="Big Grin"
       onClick="insertTag ( 'tArea', '    :D    ' )">
</form>
</body>
</html>

But check for Browser-Compability, i only tested it in IE
ps: remove '_' from e_val and the smiley you see are : + ) and : + D
[ May 09, 2003: Message edited by: Christian Baron ]
Making it so the smiles disappear and no need for _ with the clicks - Eric
[ May 10, 2003: Message edited by: Eric Pascarello ]
also removed _ in eval now
[ May 10, 2003: Message edited by: Christian Baron ]

Eric Pascarello

author

Posts: 15385

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

OOOPS...first post here was wrong...too many open windows!
Just to let you know
when you use the words with an o thaty give you trouble replace them with o
onclick="smile";
Eric
[ May 09, 2003: Message edited by: Eric Pascarello ]

Pashi Soni

Greenhorn

Posts: 26

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Christian,
The code is working fine if I have to add some content at the end of the text in the text area. The actual problem is, I want to put the content whereever the cursor is in the text area, and not at the end of the text. Please give some more suggestions
with regards
Pashmina

Eric Pascarello

author

Posts: 15385

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is IE only since IE is the only one that uses the caret position...Are you using IE??

Eric Pascarello

author

Posts: 15385

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here is a link that explains how this works. It is to another forum I post on.
http://www.codingforums.com/showthread.php?s=&threadid=12235
Eric

Pashi Soni

Greenhorn

Posts: 26

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Eric,
Yeah I am working on IE-6. The link you have provided have one text area and 3 buttons, but it is not working in IE. What will work in IE then ?
regards
Pashmina

Eric Pascarello

author

Posts: 15385

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

it works, he has the buttons set up for adding text around a selection. The image button I think works for the caret postion.

Chris Baron

Ranch Hand

Posts: 1061

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
in ie6.0 my code works... inserting at cursor position. I would never steal *erm* adapt so much code just to add some Chars at the end

.
I removed _ from e_val, just copy and paste and try again.
cb

Pashi Soni

Greenhorn

Posts: 26

posted 20 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello Eric,
Yeah it worked. Well I think it will help me to do R&D further, since I want to add a text on cursor position. For the above program u suggested, adds text when a selection is made. I want it to add, even if selection is not made, just the cursor has to be in the text area.
regards
Pashmina