61,115
社区成员
发帖
与我相关
我的任务
分享关于输入文本的一个问题！
用户在文本区里输入完以后，用户选中其中的一段文字，然后点击一个按钮，给选中的文字加下划线，就好象word里的那个加下划线的按钮，在html里这种按钮实现？？
...全文
请发表友善的回复…
发表回复
jzsh2000 2003-02-11
- 打赏
- 举报
看看这段代码是不是符合你的要求，这是MSDN的一个例子：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Editable Regions Sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 80%; BACKGROUND: white; MARGIN: 0px; FONT-FAMILY: verdana
}
BUTTON {
FONT-WEIGHT: bold; BORDER-LEFT-COLOR: #99ccff; BACKGROUND: #ffffff; BORDER-BOTTOM-COLOR: #99ccff; CURSOR: hand; BORDER-TOP-COLOR: #99ccff; BORDER-RIGHT-COLOR: #99ccff
}
.bar {
BORDER-TOP: #99ccff 1px solid; BACKGROUND: #336699; WIDTH: 100%; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.desbar {
PADDING-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
}
.title {
PADDING-LEFT: 10px; FONT-SIZE: 15pt; COLOR: white
}
.bar A:link {
COLOR: white; TEXT-DECORATION: none
}
.bar A:visited {
COLOR: white; TEXT-DECORATION: none
}
.bar A:active {
COLOR: white; TEXT-DECORATION: none
}
.bar A:hover {
COLOR: yellow; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT>
<!-- The fnInit function initializes the editable and non-editable regions -->
<!-- of the document -->
function fnInit(){
<!-- Ensure the display interface is not selectable, by making all -->
<!-- elements UNSELECTABLE -->
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
<!-- Prepare the editable regions -->
oDiv.unselectable = "off";
oTextarea.unselectable = "off";
}
<!-- The fnToggleEdits function turns editing on or off in the editable -->
<!-- regions of the document -->
function fnToggleEdits(oObj,oBtn) {
currentState = oObj.isContentEditable;
newState = !currentState;
oObj.contentEditable = newState;
newState==false ? oBtn.innerHTML='Turn Editing On' :
oBtn.innerHTML='Turn Editing Off';
}
</SCRIPT>
<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD>
<BODY onload=fnInit();><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<DIV class="bar title">Editable Regions Sample</DIV>
<DIV class=desbar>
<H4 style="FONT-SIZE: 10pt">This example demonstrates the features of Microsoft®
Internet Explorer that enable users to edit the content of an HTML element
directly from the browser.</H4>
<P>This HTML editor is a <B>DIV</B> element set to be content-editable. Any
valid HTML content (text, images, form controls, etc.) can be pasted and edited
in this editor.</P>
<DIV align=center>
<DIV
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"
align=center>
<DIV class="bar title">HTMLEditor (Content-Editable DIV)</DIV>
<DIV
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><BUTTON
id=oEditDiv title="Turn Editing Off"
onclick=fnToggleEdits(oDiv,oEditDiv);oDiv.focus();>Turn Editing
Off</BUTTON><BUTTON id=oBoldBtn title=Bold
onclick='if (oDiv.isContentEditable==true) document.execCommand("Bold");'><B>Bold</B></BUTTON><BUTTON
id=oItalicBtn title=Italic
onclick='if (oDiv.isContentEditable==true) document.execCommand("Italic");'><I>Italic</I></BUTTON><BUTTON
id=oUndLnBtn title=Underline
onclick='if (oDiv.isContentEditable==true) document.execCommand("Underline");'><U>Underline</U></BUTTON>
</DIV>
<DIV id=oDiv contentEditable=true
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"
align=left></DIV><BUTTON title="Append from HTMLEditor"
onclick=oTextarea.value+=oDiv.innerHTML;oTextarea.focus();>Append to
TextEditor</BUTTON> </DIV></DIV>
<P>This text editor is a <B>TEXTAREA</B> element and is content-editable by
default. Only text can be edited in this tool. However, you can draft HTML in
the TEXTEditor and press the <B>Append to HTMLEditor</B> button to see the
result appended to HTMLEditor. The <B>Append to TextEditor</B> button reverses
this process by appending the HTMLEditor's HTML as text to the TEXTEditor.
</P><BR>
<DIV align=center>
<DIV
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"
align=center>
<DIV class="bar title">TEXTEditor (TEXTAREA)</DIV>
<DIV
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><BUTTON
id=oEditText title="Turn Editing Off"
onclick="fnToggleEdits(oTextarea,oEditText); oTextarea.focus();">Turn
Editing Off</BUTTON> </DIV><TEXTAREA 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" ALIGN="left"></TEXTAREA><BR><BUTTON
title="Append to HTMLEditor"
onclick=oDiv.innerHTML+=oTextarea.value;oTextarea.focus();>Append to
HTMLEditor</BUTTON> </DIV></DIV><BR>
<P>Both editors use the same function to activate or deactivate editing. The
function uses the <B>isContentEditable</B> property to test whether editing is
active. Accordingly, the <B>contentEditable</B> property is then reversed to
reset editing.</P></DIV>
<DIV class=bar
style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><A
target=_top href="http://www.microsoft.com/misc/cpyright.htm">©2001 Microsoft
Corporation. All rights reserved. Terms of use.</A> </DIV></BODY></HTML>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
参考：
http://expert.csdn.net/Expert/topic/1397/1397378.xml?temp=.8494532
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Editable Regions Sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 80%; BACKGROUND: white; MARGIN: 0px; FONT-FAMILY: verdana
}
BUTTON {
FONT-WEIGHT: bold; BORDER-LEFT-COLOR: #99ccff; BACKGROUND: #ffffff; BORDER-BOTTOM-COLOR: #99ccff; CURSOR: hand; BORDER-TOP-COLOR: #99ccff; BORDER-RIGHT-COLOR: #99ccff
}
.bar {
BORDER-TOP: #99ccff 1px solid; BACKGROUND: #336699; WIDTH: 100%; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 30px
}
.desbar {
PADDING-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
}
.title {
PADDING-LEFT: 10px; FONT-SIZE: 15pt; COLOR: white
}
.bar A:link {
COLOR: white; TEXT-DECORATION: none
}
.bar A:visited {
COLOR: white; TEXT-DECORATION: none
}
.bar A:active {
COLOR: white; TEXT-DECORATION: none
}
.bar A:hover {
COLOR: yellow; TEXT-DECORATION: none
}
</STYLE>
<SCRIPT>
<!-- The fnInit function initializes the editable and non-editable regions -->
<!-- of the document -->
function fnInit(){
<!-- Ensure the display interface is not selectable, by making all -->
<!-- elements UNSELECTABLE -->
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
<!-- Prepare the editable regions -->
oDiv.unselectable = "off";
oTextarea.unselectable = "off";
}
<!-- The fnToggleEdits function turns editing on or off in the editable -->
<!-- regions of the document -->
function fnToggleEdits(oObj,oBtn) {
currentState = oObj.isContentEditable;
newState = !currentState;
oObj.contentEditable = newState;
newState==false ? oBtn.innerHTML='Turn Editing On' :
oBtn.innerHTML='Turn Editing Off';
}
</SCRIPT>
<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD>
<BODY onload=fnInit();><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<DIV class="bar title">Editable Regions Sample</DIV>
<DIV class=desbar>
<H4 style="FONT-SIZE: 10pt">This example demonstrates the features of Microsoft®
Internet Explorer that enable users to edit the content of an HTML element
directly from the browser.</H4>
<P>This HTML editor is a <B>DIV</B> element set to be content-editable. Any
valid HTML content (text, images, form controls, etc.) can be pasted and edited
in this editor.</P>
<DIV align=center>
<DIV
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"
align=center>
<DIV class="bar title">HTMLEditor (Content-Editable DIV)</DIV>
<DIV
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><BUTTON
id=oEditDiv title="Turn Editing Off"
onclick=fnToggleEdits(oDiv,oEditDiv);oDiv.focus();>Turn Editing
Off</BUTTON><BUTTON id=oBoldBtn title=Bold
onclick='if (oDiv.isContentEditable==true) document.execCommand("Bold");'><B>Bold</B></BUTTON><BUTTON
id=oItalicBtn title=Italic
onclick='if (oDiv.isContentEditable==true) document.execCommand("Italic");'><I>Italic</I></BUTTON><BUTTON
id=oUndLnBtn title=Underline
onclick='if (oDiv.isContentEditable==true) document.execCommand("Underline");'><U>Underline</U></BUTTON>
</DIV>
<DIV id=oDiv contentEditable=true
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"
align=left></DIV><BUTTON title="Append from HTMLEditor"
onclick=oTextarea.value+=oDiv.innerHTML;oTextarea.focus();>Append to
TextEditor</BUTTON> </DIV></DIV>
<P>This text editor is a <B>TEXTAREA</B> element and is content-editable by
default. Only text can be edited in this tool. However, you can draft HTML in
the TEXTEditor and press the <B>Append to HTMLEditor</B> button to see the
result appended to HTMLEditor. The <B>Append to TextEditor</B> button reverses
this process by appending the HTMLEditor's HTML as text to the TEXTEditor.
</P><BR>
<DIV align=center>
<DIV
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"
align=center>
<DIV class="bar title">TEXTEditor (TEXTAREA)</DIV>
<DIV
style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px"><BUTTON
id=oEditText title="Turn Editing Off"
onclick="fnToggleEdits(oTextarea,oEditText); oTextarea.focus();">Turn
Editing Off</BUTTON> </DIV><TEXTAREA 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" ALIGN="left"></TEXTAREA><BR><BUTTON
title="Append to HTMLEditor"
onclick=oDiv.innerHTML+=oTextarea.value;oTextarea.focus();>Append to
HTMLEditor</BUTTON> </DIV></DIV><BR>
<P>Both editors use the same function to activate or deactivate editing. The
function uses the <B>isContentEditable</B> property to test whether editing is
active. Accordingly, the <B>contentEditable</B> property is then reversed to
reset editing.</P></DIV>
<DIV class=bar
style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><A
target=_top href="http://www.microsoft.com/misc/cpyright.htm">©2001 Microsoft
Corporation. All rights reserved. Terms of use.</A> </DIV></BODY></HTML>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
参考：
http://expert.csdn.net/Expert/topic/1397/1397378.xml?temp=.8494532
