Solved

Insert Text Into Textarea at Cursor Position

Posted on 2006-06-15
11
1,446 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

738 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