Change selected text using a button

BunBo900 · Dec 22, 2009

Objective:
In textarea in a form:
1)Select text with cursor
2)Click a button (say bold)
3)Click a button (say underline)
4)Click a button (say italic)...etc...

5)The selected text gets <b>selected text</b> HTML bold tags written around it - without moving the selected text from its position in the rest of the text.

How do I accomplish that using JavaScript/ColdFusion? Is it even possible?

Hope you can help.

Thanks

cfSearching · Dec 23, 2009

Definitely possible with javascript. Do a search on: javascript selected text. There are tons of articles on it.

----------------------------------

http://cfsearching.blogspot.com/

FALCONSEYE · Dec 28, 2009

take a look at this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css with jQuery</title>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"[/URL] type="text/javascript"></script>

<script>
$().ready(function() {
	$("#css-italic").click(function() {			   
			$("#sample").css("font-style","italic");
	});
	$("#css-bold").click(function() {			   
			$("#sample").css("font-weight","bold");
	});
	$("#css-red").click(function() {			   
			$("#sample").css("color","#C33");
	});
	$("#css-underline").click(function() {			   
			$("#sample").css("text-decoration","underline");
	});
	$("#css-clear").click(function() {			   
			$("#sample").css("font-style","normal");
			$("#sample").css("font-weight","normal");
			$("#sample").css("color","black");
			$("#sample").css("text-decoration","none");
	});
});
</script>
</head>
<!--- --->
<div id="sample">happy new year!</div><br />
<input type="button" id="css-italic" value="Make it Italic"  />
<input type="button" id="css-bold" value="Make it Bold"  />
<input type="button" id="css-red" value="Make it Red"  />
<input type="button" id="css-underline" value="Make it Underlined"  />
<input type="button" id="css-clear" value="Reset"  />
</body>
</html>

It uses jQuery lib. I loveee Jquery.

http://www.fuzzysiberians.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change selected text using a button

BunBo900

MIS

cfSearching

Programmer

FALCONSEYE

Programmer

Similar threads

Part and Inventory Search

Sponsor