Hi,
The document.selection method is IE specific and so does not work in other browsers. The method is slightly more involved in non-IE browsers, assuming that your textarea had the id "textarea1" (original I know :)) this code would give an alert with the selected text:
-
var $obj = document.getElementById("textarea1")
-
alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
-
The selectionStart and selectionEnd properties give the positions for the start of the selection and the end, which are then used to get the selection from the value of the textbox.
To reproduce the current behaviour in IE across browsers try:
-
function makeitbold(){
-
var $tb = document.getElementById("textbox");
-
-
if (document.selection){
-
var str=document.selection.createRange().text;
-
var sel=document.selection.createRange();
-
sel.text="<b>"+str+"</b>";
-
}else if (typeof $tb.selectionStart != 'undefined'){
-
var $before, $after, $selection;
-
$before= $tb.value.substring(0, $tb.selectionStart)
-
$selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
-
$after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
-
-
$tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
-
}
-
$tb.focus();
-
-
}
-
I have selected the textarea into the variable $tb as it reduces the code required. This performs the same accross browsers except for one instance. When no text is selected in the textbox clicking a button to run the function behaves differently:
- IE - adds <b></b> to the button text
- Non-IE - adds <b></b> to the end of the textarea
Hope this covers everything, let me know if any of this is unclear
