Solved

Insert Text Into Textarea at Cursor Position

Posted on 2006-06-15
11
1,440 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

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…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now