Page 1 of 1

Tag insertion script auto scrolls to top after tag is added

Posted: Sun Jun 01, 2008 3:02 pm
by mirra1515
My tag insertion script is used to place tags into a text area around highlighted text when a button is pressed. For example...the bold button would place html-style bold tags around highlighted text.

In Firefox my the script works; however, after it inserts the tags around the text it scrolls to the top most portion of the textarea...needless to say, that is very obnoxious when dealing with lots of text.

Is there any way to solve this problem?

My Javascript code looks like this:

Code: Select all

function getSelection(ta)
  { var bits = [ta.value,'','','']; 
    if(document.selection)
      { var vs = '#$%^%$#';
        var tr=document.selection.createRange()
        if(tr.parentElement()!=ta) return null;
        bits[2] = tr.text;
        tr.text = vs;
        fb = ta.value.split(vs);
        tr.moveStart('character',-vs.length);
        tr.text = bits[2];
        bits[1] = fb[0];
        bits[3] = fb[1];
      }
    else
      { if(ta.selectionStart == ta.selectionEnd) return null;
        bits=(new RegExp('([\x00-\xff]{'+ta.selectionStart+'})([\x00-\xff]{'+(ta.selectionEnd - ta.selectionStart)+'})([\x00-\xff]*)')).exec(ta.value);
      }
     return bits;
  }
 
function matchPTags(str)
  { str = ' ' + str + ' ';
    ot = str.split(/\[[b|u|i|a|f].*?\]/i);
    ct = str.split(/\[\/[b|u|i|a|f].*?\]/i);
    return ot.length==ct.length;
  }
 
function addPTag(ta,pTag)
  { bits = getSelection(ta);
    if(bits)
      { if(!matchPTags(bits[2]))
          { alert('\t\tInvalid Selection, this area already has tags \(bold, italics, etc.\).');
            return;
          }
        
        if (pTag == 'a') {
            var URL = prompt("Please enter the URL address here: \(http://www.abc123.com\)");
            ta.value = bits[1] + '<' + pTag + ' href=\"' +  URL + '\">' + bits[2] + '</' + pTag + '>' + bits[3];
        }
        else if (pTag == 'f') {
            var color = prompt("Please choose a color (red, blue, yellow, etc...):");
            ta.value = bits[1] + '<font color=\"' + color +  '\">' + bits[2] + '</font>' + bits[3];
        }
        else {
            ta.value = bits[1] + '<' + pTag + '>' + bits[2] + '</' + pTag + '>' + bits[3];
        }
      }
  }
And my PHP looks like this:

Code: Select all

<html>
<script src="taginsert.js"></script>
</head>
 
<body>
<button onclick="addPTag(document.getElementById('text'),'b')" value="bold"></button>
<button onclick="addPTag(document.getElementById('text'),'i')" value="italics"></button>
<button onclick="addPTag(document.getElementById('text'),'u')" value="underline"></button>
<button onclick="addPTag(document.getElementById('text'),'a')"  value="URL"></button>
<button onclick="addPTag(document.getElementById('text'),'f')"  value="font color"></button>
 
<textarea id="text" rows="20" cols="80">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.
</textarea>
 
</body>
</html>

Re: Tag insertion script auto scrolls to top after tag is added

Posted: Sun Jun 01, 2008 3:08 pm
by kaszu
Before doing anything read scrollTop property of the textarea, do your changes and then restore scrollTop value.

Re: Tag insertion script auto scrolls to top after tag is added

Posted: Sun Jun 01, 2008 5:57 pm
by mirra1515
Thanks for the response, I'm looking into that now and I can't find what I'm looking for sadly...hmmm...