如何在JavaScript中使选定的文本加粗/斜体/加下划线？ [英] How to make selected text bold/italic/underlined in javascript?
问题描述
我试图在一个允许用户为学校项目编写自己的笔记的网页上工作，我的想法是让他们用按钮大胆/斜体/加下划线。截至目前，按钮正在工作，但它们大胆/斜体/强调了文本区域内的所有内容。相反，我希望它以这样的方式工作，只有他们突出显示的文本才会变得粗体/斜体/下划线。
我也想知道如何做到这一点，以便当他们点击粗体按钮时，他们从后面输入的文本将变为粗体，当他们再次单击时，从那时输入的文本
< script type =text / javascript>
函数boldText（）{
var target = document.getElementById（TextArea）;
if（target.style.fontWeight ==bolder）{
target.style.fontWeight =normal;
} else {
target.style.fontWeight =bolder;
$ b函数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 。
SNIPPET
<！DOCTYPE html>< html> < HEAD> < meta charset ='utf-8'> <风格> body {font：400 16px / 1.4'serif'; }＃editor1 {border：3px inset grey; height：100px;宽度：381px; margin：10px auto 0; } fieldset {margin：2px auto 15px;宽度：358px; } button {width：5ex; text-align：center; padding：1px 3px; }< / style>< / head>< body> < div id =editor1contenteditable =true>快速的棕色狐狸跳过了懒狗。 < / DIV> <字段集> < button class =fontStyleonclick =document.execCommand（'italic'，false，null）; title =斜体高亮文字>< i> I< / i> < /按钮> < button class =fontStyleonclick =document.execCommand（'bold'，false，null）; title =粗体高亮文字>< b> B< / b> < /按钮> < button class =fontStyleonclick =document.execCommand（'underline'，false，null）;>< u> U< / u> < /按钮> < / fieldset>
I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined. I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal.
<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>
You can use execCommand(). This API was meant for developing text editors. The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font: 400 16px/1.4 'serif';
}
#editor1 {
border: 3px inset grey;
height: 100px;
width: 381px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 358px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<div id="editor1" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</div>
<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);"><u>U</u>
</button>
</fieldset>
这篇关于如何在JavaScript中使选定的文本加粗/斜体/加下划线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
