将文本加粗会使它出错，有时它会打开和关闭

问题描述

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

<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

解决方法

首先，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>

html javascript