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

时间:2018-05-03 16:00:46

标签: javascript html css

我在点击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>

1 个答案:

答案 0 :(得分:2)

你误解了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>