使文本加粗会引起错误，有时它会打开和关闭

Question

我知道标题不是很好，但我有一个 div 基本上有 contenteditable="true" 当按下 CTRL + B 时，您键入的文本应该变为粗体并且它有效。但是当我打开它时，它有时会打开和关闭粗体，这是它的一个片段：

<html>
<head>
 <style>
 .textbox {
  border: 1px solid;
  border-radius: 5px;
  width: 50%;
  height: 170px;
  outnline: none;
  }
 .textbox: focus {
  border: 2px solid;
 } 
</style>
</head>
 <body>
 <div onkeyup="boldText()" contenteditable="true" class="textbox">
 </div>
<script>
function boldText() {
 if (event.keyCode == 17 + 66) {
  document.execCommand('bold');
 }
}
</script>
</body>
</html>

这是一个 JSFiddle：https://jsfiddle.net/YT_Xaos/cogrm9b0

Answer 1

嗯，首先，document.execCommand(); 已被弃用。我会试试这个。

function boldText(e) {
  if (e.keyCode == 17 && e.keyCode == 66) {
   let textBox = document.querySelector('.textbox');
   textBox.style.fontWeight = 'bold';
  }
}

document.addEventListener('keyup', boldText);

.textbox {
  border: 1px solid;
  border-radius: 5px;
  width: 50%;
  height: 170px;
  outline: none;
}
.textbox: focus {
  border: 2px solid;
}

<html>
 <body>
 <div contenteditable="true" class="textbox">
 </div>
</body>
</html>

使文本加粗会引起错误，有时它会打开和关闭

Making the text bold bugs it and sometimes it switches on and off

html

javascript

css

keycode