我正在尝试开发一个允许用户为学校项目编写自己的笔记的网页,我的想法是让他们使用按钮加粗/斜体/下划线。截至目前,按钮正在工作,但它们将文本区域内的所有内容加粗/斜体/下划线。相反,我希望它以这样一种方式工作,即只有他们突出显示的文本才会加粗/斜体/下划线。我还想知道如何做到这一点,以便当他们单击粗体按钮时,他们从那时起键入的文本将变为粗体,当他们再次单击它时,从那时起键入的文本将正常显示。
<script type="text/javascript">
function boldText(){
var target = document.getElementById("TextArea");
if( target.style.fontWeight == "bolder" ) {
target.style.fontWeight = "normal";
} else {
target.style.fontWeight = "bolder";
}
}
function italicText(){
var target = document.getElementById("TextArea");
if( target.style.fontStyle == "italic" ) {
target.style.fontStyle = "normal";
} else {
target.style.fontStyle = "italic";
}
}
function underlineText(){
var target = document.getElementById("TextArea");
if( target.style.textDecoration == "underline" ) {
target.style.textDecoration = "none";
} else {
target.style.textDecoration = "underline";
}
}
</script>
execCommand()
.此 API 用于开发文本编辑器。3 个按钮利用非常通用的execCommand()
,书写元素是启用属性的普通div contenteditable
.
片段
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
:root {
font: 400 2ch/1.25 Consolas;
}
body {
font-size: 2ch
}
#editor {
height: 100px;
width: 375px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 375px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<fieldset id="editor" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</fieldset>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);" title='Underline Highlighted Text'><u>U</u>
</button>
</fieldset>
</body>
</html>
Textarea 不允许这样的事情。我建议你使用像ckeditor这样的东西。它将为您整齐地完成工作。但是,如果您仍然想自己动手,则需要使用带有内容可编辑标签的div
。
祝你好运!
textarea
你无法做到这一点,请改用divs
,这样你就可以做这样的事情:
$(document).ready(function(){
$('.boldText').click(function(){
$('.container').toggleClass("bold");
});
$('.italicText').click(function(){
$('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
$('.container').toggleClass("underline");
});
});
div.container {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 5px;
}
.bold{
font-weight:bold;
}
.italic{
font-style :italic;
}
.underline{
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">