textarea scroll "jump to start" when insert smiley

[eevan79]

I have textarea and when insert smiliey textarea scroll "jump to beginning" (if there is more text than textarea size).

How to prevent scroll when smiley is insered?

 

Here is code:

<form name="myForm" method="post" action="reply.php"> 
<a href="JavaScript:doSmile('')">
<img src="img/smilies/grin.gif" border="0" title="" /></a> 
    <a href="JavaScript:doSmile(';-)')">
<img src="img/smilies/wink.gif" border="0" title="" /></a> 
    <a href="JavaScript:doSmile(':-p')">
<img src="img/smilies/tongue.gif" border="0" title=":-p" /></a> 
    <a href="JavaScript:doSmile(':-(')">
<img src="img/smilies/sad.gif" border="0" title=":-(" /></a>

<textarea class="reply" id="reply" name="reply" style="height:260px;width:680px;">{MYREPLY}</textarea>

 

And javascript for insert smiley into textarea

 

function formatText(el,tagstart,tagend) {
      if (el.setSelectionRange) {
         el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
      }
      else {
          // IE code here...
      }
  }

    
  function doSmile(tag) {
formatText(document.getElementById('reply'),''+tag+'','');
}

 

[Adam]

Basically you have to capture the scrollTop value of the text area before you change the value, then reapply once it's been changed. You'll also need to set the new selection after, otherwise the cursor won't be in the right position:

 

function formatText(el, tagstart, tagend) {
    if (el.setSelectionRange) {
        var start = el.value.substring(0, el.selectionStart);
        var selected = el.value.substring(el.selectionStart, el.selectionEnd);
        var end = el.value.substring(el.selectionEnd, el.value.length);

        var scroll = el.scrollTop;
        var caret = el.selectionStart;

        el.value = start + tagstart + selected + tagend + end;
        el.focus();
        el.scrollTop = scroll;

        if (selected.length == 0) {
            el.setSelectionRange(caret + tagstart.length, caret + tagstart.length);
        } else {
            el.setSelectionRange(caret, caret + tagstart.length + selected.length + tagend.length);
        }
    } else if (el.createTextRange) {
        // IE code here...
    }
}

 

That'll cater for when you pass a start and end tag for highlighted text too. I'll let you have a bash at the IE compatibility part though, look into createTextRange

[eevan79]

Very thanks,MrAdam.

 

I thought I never get answer for this. 

 

Its working fine, but there is small issue (as before).

 

When I highlight text in textarea with cursor and click BOLD button I get text. And thats ok. But when I insert smiley I get it before selected text instead after.

 

Example: I selected (highlight) text and click smiley button I get this: " text" instead of "text ".

 

Not big deal, but it will be nice if smiley is added before selected text .

 

And for IE compatibility...well, that problem will solve it self  (just joking) I have tried different methods, but never have success.

[eevan79]

I have edit script for IE, but now I get all text in textarea between tags (tagstart, tagend), instead of selected.

 

Code:

 

function formatText(el, tagstart, tagend) {
    if (el.setSelectionRange) {
        var start = el.value.substring(0, el.selectionStart);
        var selected = el.value.substring(el.selectionStart, el.selectionEnd);
        var end = el.value.substring(el.selectionEnd, el.value.length);

        var scroll = el.scrollTop;
        var caret = el.selectionStart;

        el.value = start + tagstart + selected + tagend + end;
        el.focus();
        el.scrollTop = scroll;

        if (selected.length == 0) {
            el.setSelectionRange(caret + tagstart.length, caret + tagstart.length);
        } else {
            el.setSelectionRange(caret, caret + tagstart.length + selected.length + tagend.length);
        }
    } else if (el.createTextRange) {
        // IE code here...
        var start = el.value.substring(0, el.selectionStart);
        var selected = el.value.substring(el.selectionStart, el.selectionEnd);
        var end = el.value.substring(el.selectionEnd, el.value.length);
        var caret = el.selectionStart;
        
        sel = document.selection.createRange();
        el.value = start + tagstart + selected + tagend + end;
        el.focus();
        
        if (selected.length == 0) {
            el.createTextRange(caret + tagstart.length, caret + tagstart.length);
        } else {
            el.createTextRange(caret, caret + tagstart.length + selected.length + tagend.length);
        }
        
    }
}

[Adam]

In answer to your first question, just send the smiley as the second parameter to formatText(). I don't have time to look into your IE problem at minute though, I'm just about to leave. I'll take a look later on.

[eevan79]

Anyone have idea how to fix this for IE browsers.

When I select text I get text before, in and after tags. Example: I select "word" between [ b ] and [ / b ] tags and I get this:

 

word [ b ]word[ / b ] word . But thats only problem with IE.