473,327 Members | 2,112 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

bold the selected text in textarea for firefox

realin
254 100+
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 :)
Aug 28 '07 #1
2 51588
phvfl
173 Expert 100+
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
Aug 30 '07 #2
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?
Dec 26 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Imaya Kumar | last post by:
Hi, i'm developing an editor in VS.NET using Rich Text Box Control. I need to make a selected text Bold. how can i do this? also i will have an Italic Button too. If i click Bold button the...
3
by: gooderthanyou | last post by:
I have a textfield and you of course you can select text... When they hit the bold button I want it to obtain the selected text and bold it, the hard part is trying to figure out if javascript...
4
by: Adnan Siddiqi | last post by:
Hi Pardon me if I am not making any sense.What I want to know the cordinates of selected text by user so that i can save/retrieve them later.is It possible.I am lookig for both IE and Firefox...
2
by: Daniel Pitts | last post by:
Why doesn't this work? I create an object which is supposed to handle the selection in both IE and Firefox, but everytime I call getText() in firefox, I get the whole textarea, not just the...
6
by: =?Utf-8?B?bWlrZQ==?= | last post by:
trying to convert selected text in a textbox to bold font. can someone provide me code sample? thanks.
2
by: King of the R.O.U.S.'s | last post by:
Hi All How do I replace selected text in a textarea with JavaScript? I have a text area that the user can select what they want then press a button that will pick up the selected text, make...
0
by: Ignacio Machin ( .NET/ C# MVP ) | last post by:
On Jul 22, 9:41 am, "none" <n...@none.comwrote: Take a look at the Selected property of the RichTextBox control
1
by: malathib | last post by:
Hi, I am trying to do the following in firefox.Please suggest the solution that will be applicable to firefox only. I am having one xml and xslt file. I kept the xml file content in iframe. Now...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.