Link to home
Start Free TrialLog in
Avatar of shaggy_the_sheep
shaggy_the_sheep

asked on

Insert Text Into Textarea at Cursor Position

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
Avatar of pD_EO
pD_EO

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;
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 :)
Avatar of shaggy_the_sheep

ASKER

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
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>
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
it NOW works in FireFox..sorry
I have to goto work, so i'll have a look at this tonight, i'm sure it's something simple :)
Okay no probs!! Thanks..
ASKER CERTIFIED SOLUTION
Avatar of pD_EO
pD_EO

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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