Hey guys,

I have this script to append tags to selected text in a textarea (bbcode or similar).

Code JavaScript:
<script type=text/javascript>
  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 {
  		  var selectedText = document.selection.createRange().text;
 
        if (selectedText != "") {
            var newText = tagstart + selectedText + tagend;
            document.selection.createRange().text = newText;
        } 
 
        else {
 
             el.value += tagstart + tagend;
 
}
 
  	}
  }
</script>
  <a onclick="formatText(document.getElementById('body'),'<b>','</b>')">sdsa</a>
  <textarea id="body" rows="10" cols="30"></textarea>
  <input type="submit" value="SUBMIT" />
  </form>

This works fine in Firefox, but in IE it doesn't append the tags around the selected text, just to the end of the text in the textarea.

However if I change the <a> tag to:

Code JavaScript:
<input type="button" value="bold" onclick="formatText(document.getElementById('body'),'<b>','</b>')" />

It works fine in both IE and Firefox.

Why isn't the <a> tag working here?? (the same happens with <span>, that is, it doesn't apply the tag to the selected text in IE but does in FF)