Insert bold tag in textarea bug

Hi,

Using some code from another post, I am able to added <b> and </b> tags to a selected area. The problem is that when nothing is selected the <b> and </b> tags get added to the page (in front of the link or button used to create it).

Is there any way to make it work only when a bit of text is selected in the text area?

Code below.


Thanks in advance.

<html>
<head>
  <title>Untitled</title>
<script language="javascript">
<!--
function insertTags(event) {
  if (document.layers) {
    var range=document.getSelection();
     var wholeText=document.editor.notes.value;
  }
  if (document.all) {
    var range=document.selection.createRange();
     rangeText="<b>"+range.text+"</b>";
     range.text=rangeText;
  }
  document.editor.notes.focus();
 
}
//-->
</script>
</head>
<body>
<form name="editor">
  <textarea name="notes" rows="20" cols="80"></textarea><br>
  <a href="#" onClick="insertTags()">bold</a>
</form>
<br><br>
</body>
</html>
mrduckersAsked:
Who is Participating?
 
callrsConnect With a Mentor Commented:
Your code:
  if (document.all) {
    var range=document.selection.createRange();
       if(range.text.length==0) return;               // add this line
     rangeText="<b>"+range.text+"</b>";
     range.text=rangeText;
  }

Or Bonmat86's code:

  text = document.getElementById('notes').value;
          if(text.length==0) return;                           // add this line
  document.getElementById('notes').value = "</b>" + text + "</b>";
  document.editor.notes.focus();
0
 
Khanh DoanSenior DeveloperCommented:
<html>
<head>
  <title>Untitled</title>
<script language="javascript">
<!--
function insertTags(event) {
  /*if (document.layers) {
    var range=document.getSelection();
     var wholeText=document.editor.notes.value;
  }
  if (document.all) {
    var range=document.selection.createRange();
     rangeText="<b>"+range.text+"</b>";
     range.text=rangeText;
  }*/

  text = document.getElementById('notes').value;
  document.getElementById('notes').value = "</b>" + text + "</b>";
  document.editor.notes.focus();
 
}
//-->
</script>
</head>
<body>
<form name="editor">
  <textarea name="notes" id="notes" rows="20" cols="80"></textarea><br>
  <a href="#" onClick="insertTags()">bold</a>
</form>
<br><br>
</body>
</html>

Bonmat86.
0
All Courses

From novice to tech pro — start learning today.