Question

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

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

Answer 1

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

段

＆＃13;

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

＆＃13;

Answer 2

Textarea不允许这样的事情。我建议你使用类似ckeditor的东西。它会整齐地为你完成这项工作。但如果您仍想自己动手，则需要使用带contenteditable标记的div。

祝你好运！

Answer 3

使用textarea您无法实现这一目标，请改用divs，以便您可以执行以下操作：

＆＃13;

$(document).ready(function(){
$('.boldText').click(function(){
   $('.container').toggleClass("bold");
});
$('.italicText').click(function(){
  $('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
  $('.container').toggleClass("underline");
});



});

＆＃13;

div.container {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 5px;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style :italic;
}
.underline{
 text-decoration: underline;
}

＆＃13;

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

＆＃13;

如何在javascript中选择粗体/斜体/下划线的文本？

3 个答案:

段