javascript - 为什么具有 contenteditable 值 true 的 textarea 不注册 keydown 事件

Question

这让我很困惑。
如下代码所示，当您在div中按下“ctrl + b”时，字体粗细变粗，而在textarea中不会发生。
这个问题基于 Marcus Ekwall 对 Rendering HTML inside textarea 的回答中的评论。 .但是我不能添加评论，所以我在这里问。

div, textarea {
    width: 100px;
    height: 100px;
    border: 1px solid;
    padding: 5px;
}
textarea {
    resize: none;
}
  

<div contentEditable="true"></div>
<textarea contentEditable="true" placeholder="textarea"></textarea>

Answer 1

在 textarea 中不起作用，因为它不支持 HTML 标签当它运行 document.execCommand("bold") 添加 <b>fdsfsdfds</b>在选定的文本中

这是一个使用 jQuery 的示例(已更新)

$("#editor").keypress("c",function(e){
  
	if(e.ctrlKey) {        
      
     document.execCommand('bold', false, null);


  }
    
})

#editor {
    width: 200px;
    height: 200px;
    border: 1px solid;
    padding: 5px;
    resize: none;
    border: 1px solid black;
    word-wrap: break-word;
}

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

<div id="editor" contentEditable="true"></div>

请参阅这篇关于按键的帖子 jquery: keypress, ctrl+c (or some combo like that)

关于 document.execCommand 的更多示例 http://codepen.io/netsi1964/pen/QbLLGW http://codepen.io/netsi1964/pen/QbLLGW