bold the selected text in textarea for firefox 
August 28th, 2007, 06:49 PM
|  | 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
|
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: -
var $obj = document.getElementById("textarea1")
-
alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
-
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: -
function makeitbold(){
-
var $tb = document.getElementById("textbox");
-
-
if (document.selection){
-
var str=document.selection.createRange().text;
-
var sel=document.selection.createRange();
-
sel.text="<b>"+str+"</b>";
-
}else if (typeof $tb.selectionStart != 'undefined'){
-
var $before, $after, $selection;
-
$before= $tb.value.substring(0, $tb.selectionStart)
-
$selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
-
$after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
-
-
$tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
-
}
-
$tb.focus();
-
-
}
-
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
|
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: -
var $obj = document.getElementById("textarea1")
-
alert($obj.value.substring($obj.selectionStart, $obj.selectionEnd))
-
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: -
function makeitbold(){
-
var $tb = document.getElementById("textbox");
-
-
if (document.selection){
-
var str=document.selection.createRange().text;
-
var sel=document.selection.createRange();
-
sel.text="<b>"+str+"</b>";
-
}else if (typeof $tb.selectionStart != 'undefined'){
-
var $before, $after, $selection;
-
$before= $tb.value.substring(0, $tb.selectionStart)
-
$selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd)
-
$after = $tb.value.substring($tb.selectionEnd, $tb.value.length)
-
-
$tb.value= String.concat($before, "<b>", $selection, "</b>", $after)
-
}
-
$tb.focus();
-
-
}
-
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?
|  |
| | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|
