在表单输入中使用按钮更改文本粗体

Question

我在点击B链接时以粗体格式更改输入时遇到问题。如果我将<input>更改为<div>，它就会有效，但它不能用作<input>。我在下面发布了我的代码。我正在努力解决这个问题。

$('.bold_text').toggle(function() {
  $('#notes').css('font-weight', 'bold');
}, function() {
  $('#notes').css('font-weight', 'auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="bold_text">B</button>

<form action="" method="post">
  <input type="text" id="notes" name="notes" placeholder="Write your notes here...">
  <input class="save_button" type="submit" value="Save">
</form>

Answer 1

你误解了toggle()。您可能需要创建一个类并使用toggleClass()来切换它：

$('.bold_text').click(function() {
  $('#notes').toggleClass('bold');
});

.bold {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="bold_text">B</button>

<form action="" method="post">
  <input type="text" id="notes" name="notes" placeholder="Write your notes here...">
  <input class="save_button" type="submit" value="Save">
</form>