Selecting Text Fails in IE

JavaScript
1

Hello,

I am having some difficulties with IE (again).

I wrote a script that will add the BB Code form of bold in front of a selected piece of text, and an ending form of bold at the end of it.
So if you were to select the text “moo” from a textarea that says “The cow goes ‘moo’.”, the result will be “The cow goes ‘[-b-]moo[/-b-]’.”
(Please note that I’m adding minus “-” signs to the BB Code to avoid it from rendering on this post.)
(With the use of PHP, the BB Code will be converted into the HTML version of bold later on.)

I have a form that calls a function:

<input type="button" name="bold" id="bold" value="Make Bold" onclick="make_bold()"><br>
<form name="new_message" id="new_message" action="result.php" method="get" onsubmit="return check_form()">
<textarea name="message" id="message" cols="55px;" rows="10px;"></textarea><br>
<input type="submit" value="Send Message">
</form>

And the code for the function is:

<!--

function check_form() {

if (document.getElementById("message").value.length < 1) {

alert("You must type a message.");

document.getElementById("message").focus();

return false;

}
else {

return true;

}

}

function make_bold() {

var message = document.getElementById("message");
var selected_text = message.value.substring(message.selectionStart, message.selectionEnd);

message.value = message.value.replace(selected_text, "[-b-]" + selected_text + "[/-b-]");

}

//-->

(Again with the minus “-” signs to avoid page rendering here.)

All browsers but IE work perfectly fine.
The only issue I have with IE is that it puts a [-b-] in front of ALL the content, not just the selected text (like it is supposed to do), and a [/-b-] at the end.
Instead, it should insert the [-b-] in front of the selected text, and a [/-b-] at the end… But it is not.

What is wrong with my code, and what might be a work around?

Thank you. :slight_smile:

2 

<script type="text/javascript">
// code for IE
function make_bold()
{
var message = document.getElementById("message");
if (document.selection)
{
message.focus();
var sel = document.selection.createRange();
// replace
sel.text = '<b>' + sel.text + '</b>';
}
}
</script>
3

Interesting…
Alright, I’ll give it a go.
Thank you.

4

There are two different methods used. One for IE and one for non-IE browsers. In IE you need to create a text range, in non-IE you can use selectionStart and selectionEnd. The following script has all the details.

The script has one shortcoming - the replace operation will target the first occurrence of the selected text. For instance if you select a single character “e” at the end of the test sentence the first “e” in the sentence will be shown as selected instead. You might like to sort this out with a more suitable text substring method.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Bold Selection</title>
<script type=“text/javascript”>
<!–
function showSelection()
{ var mySelection = “”;
var textareaObj = document.getElementById(“message”);
if (“selectionStart” in textareaObj)
{ // check if text is selected
if (textareaObj.selectionStart != textareaObj.selectionEnd)
{ mySelection = textareaObj.value.substring(textareaObj.selectionStart, textareaObj.selectionEnd);
} }
else
{ // create range from selection
var textRange = document.selection.createRange ();
// check whether the selection is within the textarea
var rangeParent = textRange.parentElement ();
if (rangeParent === textareaObj){ mySelection = textRange.text; }
}

  if (mySelection.length==0)
     { alert ("No text is selected."); 
     }
  else 
     {  var boldSelection=textareaObj.value.replace(mySelection,"&lt;b&gt;"+mySelection+"&lt;/b&gt;");            
        textareaObj.value=boldSelection;
        document.getElementById("s1").disabled=false; 
        document.getElementById("b1").disabled=true;  
     }             
  }

// ------------------
function check_form()
{ if(document.getElementById(“message”).value.length < 1)
{ alert(“You must type a message.”);
document.getElementById(“message”).focus();
return false;
}
else { return true; }
}
// ---------------------------
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
form { margin-top:50px; }
#wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin-left:100px; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<form name=“new_message” id=“new_message” action=“#” method=“get” onsubmit=“return check_form()”>
<p><textarea name=“message” id=“message” cols=“55” rows=“10”>Select some text and click the Bold button.</textarea></p>
<p><br>
<input type=“button” id=“b1” value=“Make Bold” onclick=“showSelection()”></p>
<p><input name=“s1” id=“s1” type=“submit” value=“Send Message” disabled></p>
</form>
<!-- end form –>
</div>
<!-- end wrap –>

</body>

</html>