The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> JavaScript Development
|
Add <b></b> tags to selected text in a textarea
Discuss Add <b></b> tags to selected text in a textarea in the JavaScript Development forum on Dev Shed.
Add <b></b> tags to selected text in a textarea JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
December 8th, 2004, 11:57 AM
|
|
Contributing User
|
|
Join Date: Jul 2002
Posts: 56
Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 11
|
|
|
Add <b></b> tags to selected text in a textarea
I have a simple form like so:
PHP Code:
<form>
<input type="button" value="BOLD" />
<textarea rows="10" cols="30"></textarea>
<input type="submit" value="SUBMIT" />
</form>
I would like to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "<b>" and a "</b>" wrapped around it. Sort of like formatting text on this forum. (For some reason I can't see the vBulletin JS that's accomplishing the similar task)
Thanks in advance!
|
December 8th, 2004, 12:12 PM
|
 |
Contributing User
|
|
Join Date: Nov 2003
Location: London, UK
Posts: 299
Time spent in forums: 1 Day 32 m 6 sec
Reputation Power: 10
|
|
here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job
PHP Code:
<script type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;
if (selectedText != "") {
var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
document.selection.createRange().text = newText;
}
}
//-->
</script>
<form name="my_form">
<textarea name="my_textarea"></textarea><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />
</form>
goran
|
December 8th, 2004, 12:29 PM
|
|
Contributing User
|
|
Join Date: Jul 2002
Posts: 56
Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 11
|
|
|
Thanks, Goran.
Unfortunately I could only get that code to work in IE. It fails in Firefox: 'document.selection' has no properties. I'll plug away a bit and see what I can come up with.
|
December 8th, 2004, 12:45 PM
|
|
Contributing User
|
|
Join Date: May 2003
Posts: 1,014
Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 14
|
|
For Mozilla and friends:
Code:
function formatText(el,tagstart,tagend) {
if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
}
else {
// IE code here...
}
}
..
<input type="button" value="BOLD" onclick="formatText(document.getElementById('myta'),'<b>','</b>')"/>
<textarea id="myta" rows="10" cols="30"></textarea>
<input type="submit" value="SUBMIT" />
</form>
Hope this helps,
Jeroen
|
December 8th, 2004, 02:36 PM
|
|
Contributing User
|
|
Join Date: Jul 2002
Posts: 56
Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 11
|
|
|
Thanks - you rock.
Still doesn't work in Safari, but Google searches reveal that this is a limitation of Safarai (and Konqueror), which does not provide a programmatic way of inserting a cursor in a textarea.
|
July 5th, 2007, 05:00 PM
|
|
Registered User
|
|
Join Date: Jul 2007
Posts: 1
Time spent in forums: 4 m 16 sec
Reputation Power: 0
|
|
|
BOLD doesn't appear as bold in textarea
I have been trying to look a wayaround to solve somewhat similar problem, but it seems like bold tag appears in coding and not word doesn't appear to be bold in the textarea. Please tell me does textarea does even support rich formatting??
is there any way around for this problem? how does all those web text editors work out there? 
Quote: | Originally Posted by cleaner416 I have a simple form like so:
PHP Code:
<form>
<input type="button" value="BOLD" />
<textarea rows="10" cols="30"></textarea>
<input type="submit" value="SUBMIT" />
</form>
I would like to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "<b>" and a "</b>" wrapped around it. Sort of like formatting text on this forum. (For some reason I can't see the vBulletin JS that's accomplishing the similar task)
Thanks in advance! |
|
July 5th, 2007, 09:08 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
June 15th, 2008, 03:19 PM
|
|
Registered User
|
|
Join Date: Feb 2004
Location: Sweden
Posts: 8
Time spent in forums: 8 h 5 m 15 sec
Reputation Power: 0
|
|
|
As of today, a year later after this post. The same code for mozilla browers does work in safari.
|
July 16th, 2009, 05:14 AM
|
|
Registered User
|
|
Join Date: Jul 2009
Posts: 1
Time spent in forums: 6 m 10 sec
Reputation Power: 0
|
|
Yea, it may not be the right way.....but it really works.....great 
Can u pls tell hw it can a bold text can be made to non-bold text.
Thanx
Quote: | Originally Posted by GoMo here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job
PHP Code:
<script type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;
if (selectedText != "") {
var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
document.selection.createRange().text = newText;
}
}
//-->
</script>
<form name="my_form">
<textarea name="my_textarea"></textarea><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />
</form>
goran |
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
