如何在JavaScript中使所选文本加粗/斜体/下划线？

Question

如何在JavaScript中使所选文本加粗/斜体/下划线？

12

我正在开发一个网页，让用户能够写下自己在学校项目中的笔记。我的想法是让他们使用按钮来加粗/斜体/下划线他们的文本。目前，这些按钮可以使用，但会将文本区域内所有的内容都加粗/斜体/下划线。我希望它能够按照他们所选择的文本进行加粗/斜体/下划线。另外，我希望知道如何让用户点击加粗按钮后，他们输入的文本从那时起变成加粗字体。再次点击该按钮，则输入的文本恢复正常字体。

<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>

- cosmo

你不能在文本编辑器中这样做。但是你可以将一个div设置为contenteditable, 然后添加样式。 - Harry Bomrah

请参考以下链接：https://dev59.com/hW445IYBdhLWcg3wws8u - palaѕн

3个回答

2

- kawadhiya21

2

使用 textarea 无法实现此功能，改用 div 元素，您可以这样做：

$(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">

- Amani Ben Azzouz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

您可以使用execCommand()。此API旨在开发文本编辑器。这3个按钮利用了非常灵活的execCommand()，而编写元素是启用了属性contenteditable的普通div。

代码片段

<!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>