用户在文本区里输入完以后，用户选中其中的一段文字，然后点击一个按钮，给选中的文字加下划线，就好象word里的那个加下划线的按钮，在html里这种按钮实现？？
---------------------------------------------------------------
看看这段代码是不是符合你的要求，这是MSDN的一个例子：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
1<html><head><title>Editable Regions Sample</title>
2<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
3<style>BODY {
4FONT-SIZE: 80%; BACKGROUND: white; MARGIN: 0px; FONT-FAMILY: verdana
5}
6BUTTON {
7FONT-WEIGHT: bold; BORDER-LEFT-COLOR: #99ccff; BACKGROUND: #ffffff; BORDER-BOTTOM-COLOR: #99ccff; CURSOR: hand; BORDER-TOP-COLOR: #99ccff; BORDER-RIGHT-COLOR: #99ccff
8}
9.bar {
10BORDER-TOP: #99ccff 1px solid; BACKGROUND: #336699; WIDTH: 100%; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
11}
12.desbar {
13PADDING-RIGHT: 10px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 10px; FONT-SIZE: 8pt; BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; WIDTH: 100%; COLOR: black; PADDING-TOP: 10px; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 105px
14}
15.title {
16PADDING-LEFT: 10px; FONT-SIZE: 15pt; COLOR: white
17}
18.bar A:link {
19COLOR: white; TEXT-DECORATION: none
20}
21.bar A:visited {
22COLOR: white; TEXT-DECORATION: none
23}
24.bar A:active {
25COLOR: white; TEXT-DECORATION: none
26}
27.bar A:hover {
28COLOR: yellow; TEXT-DECORATION: none
29}
30</style>
31<script>
32<!-- The fnInit function initializes the editable and non-editable regions -->
33<!-- of the document -->
34function fnInit(){
35<!-- Ensure the display interface is not selectable, by making all -->
36<!-- elements UNSELECTABLE -->
37for (i=0; i<document.all.length; i++)
38document.all(i).unselectable = "on";
39<!-- Prepare the editable regions -->
40oDiv.unselectable = "off";
41oTextarea.unselectable = "off";
42}
43
44<!-- The fnToggleEdits function turns editing on or off in the editable -->
45<!-- regions of the document -->
46function fnToggleEdits(oObj,oBtn) {
47currentState = oObj.isContentEditable;
48newState = !currentState;
49oObj.contentEditable = newState;
50
51newState==false ? oBtn.innerHTML='Turn Editing On' :
52oBtn.innerHTML='Turn Editing Off';
53}
54
55</script>
56<meta content="MSHTML 5.50.4134.600" name="GENERATOR"/></head>
57<body onload="fnInit();"><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
58<div class="bar title">Editable Regions Sample</div>
59<div class="desbar">
60<h4 style="FONT-SIZE: 10pt">This example demonstrates the features of Microsoft®
61Internet Explorer that enable users to edit the content of an HTML element
62directly from the browser.</h4>
63<p>This HTML editor is a <b>DIV</b> element set to be content-editable. Any
64valid HTML content (text, images, form controls, etc.) can be pasted and edited
65in this editor.</p>
66<div align="center">
67<div align="center" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 90%; BORDER-BOTTOM: black 1px solid; HEIGHT: 210px; BACKGROUND-COLOR: #99ccff">
68<div class="bar title">HTMLEditor (Content-Editable DIV)</div>
69<div style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><button id="oEditDiv" onclick="fnToggleEdits(oDiv,oEditDiv);oDiv.focus();" title="Turn Editing Off">Turn Editing
70Off</button><button id="oBoldBtn" onclick='if (oDiv.isContentEditable==true)
71 document.execCommand("Bold");' title="Bold"><b>Bold</b></button><button id="oItalicBtn" onclick='if (oDiv.isContentEditable==true)
72 document.execCommand("Italic");' title="Italic"><i>Italic</i></button><button id="oUndLnBtn" onclick='if (oDiv.isContentEditable==true)
73 document.execCommand("Underline");' title="Underline"><u>Underline</u></button>
74</div>
75<div align="left" contenteditable="true" id="oDiv" style="BORDER-RIGHT: #99ccff inset; PADDING-RIGHT: 3px; BORDER-TOP: #99ccff inset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: auto; BORDER-LEFT: #99ccff inset; WIDTH: 95%; PADDING-TOP: 3px; BORDER-BOTTOM: #99ccff inset; SCROLLBAR-BASE-COLOR: #99ccff; HEIGHT: 100px; BACKGROUND-COLOR: white; font-face: Arial"></div><button onclick="oTextarea.value+=oDiv.innerHTML;oTextarea.focus();" title="Append from HTMLEditor">Append to
76TextEditor</button> </div></div>
77<p>This text editor is a <b>TEXTAREA</b> element and is content-editable by
78default. Only text can be edited in this tool. However, you can draft HTML in
79the TEXTEditor and press the <b>Append to HTMLEditor</b> button to see the
80result appended to HTMLEditor. The <b>Append to TextEditor</b> button reverses
81this process by appending the HTMLEditor's HTML as text to the TEXTEditor.
82</p><br/>
83<div align="center">
84<div align="center" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 90%; BORDER-BOTTOM: black 1px solid; HEIGHT: 210px; BACKGROUND-COLOR: #99ccff">
85<div class="bar title">TEXTEditor (TEXTAREA)</div>
86<div style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><button id="oEditText" onclick="fnToggleEdits(oTextarea,oEditText);
87 oTextarea.focus();" title="Turn Editing Off">Turn
88Editing Off</button> </div><textarea align="left" id="oTextarea" style="BORDER-RIGHT: #99ccff inset; PADDING-RIGHT: 3px; BORDER-TOP: #99ccff inset; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: auto; BORDER-LEFT: #99ccff inset; WIDTH: 95%; PADDING-TOP: 3px; BORDER-BOTTOM: #99ccff inset; SCROLLBAR-BASE-COLOR: #99ccff; HEIGHT: 100px; BACKGROUND-COLOR: white"></textarea><br/><button onclick="oDiv.innerHTML+=oTextarea.value;oTextarea.focus();" title="Append to HTMLEditor">Append to
89HTMLEditor</button> </div></div><br/>
90<p>Both editors use the same function to activate or deactivate editing. The
91function uses the <b>isContentEditable</b> property to test whether editing is
92active. Accordingly, the <b>contentEditable</b> property is then reversed to
93reset editing.</p></div>
94<div class="bar" style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><a href="http://www.microsoft.com/misc/cpyright.htm" target="_top">©2001 Microsoft
95Corporation. All rights reserved. Terms of use.</a> </div></body></html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
参考：
http://expert.csdn.net/Expert/topic/1397/1397378.xml?temp=.8494532