问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 javascript 中使选定的文本变为粗体/斜体/下划线？

社区维基
1
新手上路，请多包涵

我正在尝试在一个允许用户为学校项目编写自己的笔记的网页上工作，我的想法是让他们使用按钮将文本加粗/斜体化/下划线。截至目前，这些按钮可以正常工作，但它们会将文本区域内的所有内容加粗/斜体/加下划线。相反，我希望它以这样一种方式工作，即只有他们突出显示的文本才会变为粗体/斜体/下划线。我还想知道如何做到这一点，当他们单击粗体按钮时，他们从那时起输入的文本将显示为粗体，当他们再次单击它时，从那时起输入的文本将显示出来普通的。

 <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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtml
阅读 817
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用 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>

原文由 zer00ne 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

使用 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">

原文由 Amani Ben Azzouz 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题