Connecting Tech Pros Worldwide Help | Site Map

bold the selected text in textarea for firefox

  #1  
Old August 28th, 2007, 06:49 PM
realin's Avatar
Familiar Sight
 
Join Date: Feb 2007
Posts: 252
hi guys,

I am trying to make a simple text editor for IE and firefox using javascript. I want to know how can i bold the selected text and otehr stuff like italics and all. cause in IE i was able to do with the following lines.

[HTML]
if(document.selection){

var str=document.selection.createRange().text;
document.getElementById(txt).focus();
var sel=document.selection.createRange();
sel.text="<b>"+str+"</b>";


}

[/HTML]

But i what i am able to get for firefox is how to select the text, and how to set position of the caret using the following functions :-
[HTML]

document.getElementById(txt).selectionStart;

document.getElementById(txt).selectionEnd;

document.getElementById(x).setSelectionRange(0,3); \\to select text
[/HTML]

please help
thanks :)

Last edited by realin; August 28th, 2007 at 06:49 PM. Reason: Email notification
  #2  
Old August 30th, 2007, 06:39 PM
Expert
 
Join Date: Aug 2007
Location: UK
Posts: 153

re: bold the selected text in textarea for firefox


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:
Expand|Select|Wrap|Line Numbers
  1. var $obj = document.getElementById("textarea1")
  2. alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
  3.  
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:
Expand|Select|Wrap|Line Numbers
  1. function makeitbold(){
  2.   var $tb = document.getElementById("textbox");
  3.  
  4.   if (document.selection){
  5.     var str=document.selection.createRange().text;
  6.     var sel=document.selection.createRange();
  7.     sel.text="<b>"+str+"</b>";
  8.   }else if (typeof $tb.selectionStart != 'undefined'){
  9.     var $before, $after, $selection;
  10.     $before= $tb.value.substring(0, $tb.selectionStart)
  11.     $selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
  12.     $after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
  13.  
  14.     $tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
  15.   }
  16.    $tb.focus();
  17.  
  18. }
  19.  

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
  #3  
Old December 26th, 2007, 07:16 AM
Newbie
 
Join Date: Dec 2007
Posts: 1

re: bold the selected text in textarea for firefox


Quote:
Originally Posted by phvfl
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:
Expand|Select|Wrap|Line Numbers
  1. var $obj = document.getElementById("textarea1")
  2. alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
  3.  
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:
Expand|Select|Wrap|Line Numbers
  1. function makeitbold(){
  2.   var $tb = document.getElementById("textbox");
  3.  
  4.   if (document.selection){
  5.     var str=document.selection.createRange().text;
  6.     var sel=document.selection.createRange();
  7.     sel.text="<b>"+str+"</b>";
  8.   }else if (typeof $tb.selectionStart != 'undefined'){
  9.     var $before, $after, $selection;
  10.     $before= $tb.value.substring(0, $tb.selectionStart)
  11.     $selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
  12.     $after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
  13.  
  14.     $tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
  15.   }
  16.    $tb.focus();
  17.  
  18. }
  19.  

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
Hi,
The code works in IE for Textareas,divs and spans, but only in a textarea in FireFox. I want the same code to work in IE and Firefox for normal text (like in a div or a span) such that onclick of a button, the selected text should come as alert message. could you please post the code for that?
Reply


Similar Threads
Thread Thread Starter Forum Replies Last Post
Verry simple WYSIWYG form field Arjen answers 1 February 23rd, 2006 02:05 AM
global var doesn't capture text on mouseup lkrubner@geocities.com answers 9 July 23rd, 2005 06:27 PM
how to test for browser specific methods like document.selection.createRange lawrence answers 15 July 23rd, 2005 04:46 PM