Solved

Insert bold tag in textarea bug

Posted on 2006-06-25
2
598 Views
Last Modified: 2008-03-04
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>
0
Comment
Question by:mrduckers
2 Comments
 
LVL 10

Expert Comment

by:Khanh Doan
ID: 16982143
<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
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 16982372
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

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question