Solved

Insert Text Into Textarea at Cursor Position

Posted on 2006-06-15
11
1,444 Views
Last Modified: 2012-08-13
Hi

I have a page that allows the user to enter text into a textarea wherever they have the cursor placed using a button. This allows them to enter HTML markup simply. It works okay in IE but in FireFox it simply overwrites any data that was previously in the box

Heres the page:
http://www.fast-chat.co.uk/insertText.htm

Any help would be greatly appreciated.

Thanks,

Richard
0
Comment
Question by:shaggy_the_sheep
  • 6
  • 5
11 Comments
 
LVL 6

Expert Comment

by:pD_EO
ID: 16914174
Try this...

<html>
<head>
<title>Insert Text</title>

<script type="text/javascript">
<!--

function insert(open, end){
    var tArea = document.tform.tarea;
    var isIE = (document.all)? true : false;
    var open = (open)? open : "";
    var end = (end)? end : "";

    if(isIE){
       tArea.focus();
       var curSelect = document.selection.createRange();
       if(arguments[2]){
          curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
       } else {
          curSelect.text = open + curSelect.text + end;
       }
    } else if(!isIE && typeof tArea.selectionStart != "undefined"){
       var selStart = tArea.value.substr(0, tArea.selectionStart);
       var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
       var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
       if(arguments[2]){
          tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;
       } else {
          tArea.value = selStart + open + curSelection + end + selEnd;
       }
    } else {
       tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
    }
}

//-->
</script>

</head>
<body>
<form name="tform">
      <input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
      <input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
      <input type="button" onclick="insert('<strike>', '</strike>')" value="Strike" />
      <input type="button" onclick="insert('<hr>')" value="HR" />
      <input type="button" onclick="insert(':)')" value=" :) " />
      <br />
      <textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>

Just change this line to point to your forms textarea.

var tArea = document.tform.tarea;
0
 
LVL 6

Expert Comment

by:pD_EO
ID: 16914184
Oops...

This line...

tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;

Should be this...

tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;

It was my UBBC / Smiley function previously, just modified for HTML tags :)
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16914251
Hi

That works great! Just one last thing though...

The cursor does not enter the form field in the correct place. The way i had it before it enter the cursor between the tags,eg <b>|</b> (sorta like that)

This is the function is used to do it...

function setCursorPosition(oInput,oStart,oEnd) {
                if( oInput.setSelectionRange ) {
                   oInput.setSelectionRange(oStart,oEnd);
             }
             else if( oInput.createTextRange ) {
                var range = oInput.createTextRange();
                range.collapse(true);
                range.moveEnd('character',oEnd);
                range.moveStart('character',oStart);
                range.select();
             }
       }

i guess oInout would be tArea, but im not sure about oStart or oEnd

Thanks

Richard
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 6

Expert Comment

by:pD_EO
ID: 16914644
Give this a try, I think I got it...

<html>
<head>
<title>Insert Text</title>

<script type="text/javascript">
<!--

function insert(open, end){
    var tArea = document.tform.tarea;
    var isIE = (document.all)? true : false;
    var open = (open)? open : "";
    var end = (end)? end : "";
       var poss = 0;
       var pose = 1;

    if(isIE){
       tArea.focus();
       var curSelect = document.selection.createRange();
       if(arguments[2]){
          curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
       } else {
          curSelect.text = open + curSelect.text + end;
       }

             pos = ((arguments[1])? (tArea.value.lastIndexOf(arguments[1])) : tArea.value.lastIndexOf(arguments[0]) + arguments[0].length);
    } else if(!isIE && typeof tArea.selectionStart != "undefined"){
       var selStart = tArea.value.substr(0, tArea.selectionStart);
       var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
       var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
       if(arguments[2]){
          tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
       } else {
          tArea.value = selStart + open + curSelection + end + selEnd;
       }

             poss = tArea.selectionStart;
             pose = (tArea.selectionEnd - ((arguments[1])? arguments[1].length : arguments[0].length));
    } else {
       tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
    }
   
       tArea.focus();
       setCursorPosition(tArea, poss, pose);
      
}

function setCursorPosition(oInput,oStart,oEnd) {
      if(oInput.setSelectionRange ) {
            oInput.setSelectionRange(oStart,oEnd);
   } else if( oInput.createTextRange ) {
     var range = oInput.createTextRange();

     range.collapse(true);
     range.moveEnd('character',oEnd);
     range.moveStart('character',oStart);
     range.select();
   }
}

//-->
</script>

</head>
<body>
<form name="tform">
      <input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
      <input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
      <input type="button" onclick="insert('<strike>', '</strike>')" value="Strike" />
      <input type="button" onclick="insert('<hr>')" value="HR" />
      <input type="button" onclick="insert(':)')" value=" :) " />
      <br />
      <textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16915569
Wow thats quite a turn around...it not works in FireFox and not in IE!! :-D

Any ideas how to make it work in IE??

Sorry about this

Thanks,

Richard
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16915573
it NOW works in FireFox..sorry
0
 
LVL 6

Expert Comment

by:pD_EO
ID: 16918179
I have to goto work, so i'll have a look at this tonight, i'm sure it's something simple :)
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16919143
Okay no probs!! Thanks..
0
 
LVL 6

Accepted Solution

by:
pD_EO earned 500 total points
ID: 16926562
Sorry for the delay, have been quite busy.

See if this works fine for you...

<html>
<head>
<title>Insert Text</title>

<script type="text/javascript">
<!--

function insert(open, end){
    var tArea = document.tform.tarea;
    var isIE = (document.all)? true : false;
    var open = (open)? open : "";
    var end = (end)? end : "";
      var poss = 0;
      var pose = 1;

    if(isIE){
       tArea.focus();
       var curSelect = document.selection.createRange();
       if(arguments[2]){
          curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
       } else {
          curSelect.text = open + curSelect.text + end;
       }

       poss = ((arguments[1])? (tArea.value.lastIndexOf(arguments[1])) : tArea.value.lastIndexOf(arguments[0]) + arguments[0].length);

    } else if(!isIE && typeof tArea.selectionStart != "undefined"){
       var selStart = tArea.value.substr(0, tArea.selectionStart);
       var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
       var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
       if(arguments[2]){
          tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
       } else {
          tArea.value = selStart + open + curSelection + end + selEnd;
       }

       poss = tArea.selectionStart;
       pose = (tArea.selectionEnd - ((arguments[1])? arguments[1].length : arguments[0].length));
    } else {
       tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
    }
   
      tArea.focus();
      setCursorPosition(tArea, poss, pose);
     
}

function setCursorPosition(oInput,oStart,oEnd) {
     if(oInput.setSelectionRange ) {
          oInput.setSelectionRange(oStart,oEnd);
   } else if( oInput.createTextRange ) {
     var range = oInput.createTextRange();

     range.collapse(true);
     range.moveEnd('character',oEnd);
     range.moveStart('character',oStart);
     range.select();
   }
}

//-->
</script>

</head>
<body>
<form name="tform">
     <input type="button" onclick="insert('<b>', '</b>')" value="Bold" />
     <input type="button" onclick="insert('<i>', '</i>')" value="Italic" />
     <input type="button" onclick="insert('<strike>', '</strike>')" value="Strike" />
     <input type="button" onclick="insert('<hr>')" value="HR" />
     <input type="button" onclick="insert(':)')" value=" :) " />
     <br />
     <textarea cols="40" rows="5" name="tarea"></textarea>
</form>
</body>
</html>
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16927377
Hi no probs about the delay!  It works in IE apart from one niggling thing...

If you press enter to go onto the next line then the cursor moves along too far by one. Doesnt do this in FireFox though..

Any thoughts?

Thanks alot

Richard
0
 
LVL 5

Author Comment

by:shaggy_the_sheep
ID: 16927522
Hi i think ive sorted the IE problem....

Heres the butchered function!

function setCursorPosition(oInput,oStart,oEnd) {

      if(oInput.setSelectionRange ){
            oInput.setSelectionRange(oStart,oEnd);
            }
      else if( oInput.createTextRange ){
      var pos = 0;
      var newLine = 0;
      var text = oInput.value

      while (pos < oStart){
            if(text.substring(pos,oStart).indexOf('\n') > -1){
                  newLine++;
                  pos = pos + text.substring(pos,oStart).indexOf('\n') + 2;
                  }
            else{
                  pos = oStart;
                  }
            }

        oStart = oStart - newLine;
      oEnd = oEnd - newLine;
      
      var range = oInput.createTextRange();

      range.collapse(true);
      range.moveEnd('character',oEnd);
      range.moveStart('character',oStart);
      range.select();
   }
}

Not exactly the most elegant solution...but it works! :D

Thanks for all your help!

Richard
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question