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];
}
}
}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>