Question

Hello Stackoverflow World

＆＃13;

$('.bold').on('click', function(){
  $(".commTextarea").focus();
  document.execCommand('bold', null, "");
});
$('.italic').on('click', function(){
  $(".commTextarea").focus();
  document.execCommand('italic', null, ""); 
});

＆＃13;

.commTextarea{
	background:#EBD9D9;
	border:1px solid red;
	width:350px;
	height:250px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="bold" type='button' value='B'>
<input class="italic" type='button' value='I'><br>
<div class='commTextarea' contenteditable></div>

＆＃13;

下一个js代码无效。

＆＃13;

$(document).on('focus', '.commTextarea b', function(){
  $(".bold").css('background','yellow');
});
$(document).on('focusout', '.commTextarea b', function(){
  $(".bold").css('background','white');
});

＆＃13;

替代代码。

＆＃13;

$(document).on('click', '.commTextarea b', function(){
  $(".bold").css('background','yellow');
});

＆＃13;

替代代码正在运行，但是当光标不在＆＃39;粗体时，如何更改按钮的样式。（＆＃39; italic＆＃39;，...）元素。我希望我所要求的是可能的。

Answer 1

您可以将另一个CSS类应用于DOM元素，例如.form-input，因此您的HTML将如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-input bold" type='button' value='B'>
<input class="form-input italic" type='button' value='I'><br>
<div class='commTextarea' contenteditable></div>

所以现在很容易同时定位所有输入元素：

$(document).on('click', '.commTextarea b', function(){
  $(".form-input").css(...)
});

如果您愿意，也可以直接使用input选择器，但我不建议这样做，因为它会将所有的输入定位到DOM中。

如何更改使用contentEditable div的按钮样式

1 个答案: