Solved

Insert Text Into Textarea at Cursor Position

Posted on 2006-06-15
11
1,443 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

816 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

8 Experts available now in Live!

Get 1:1 Help Now