Javascript:如何制作:当用户按下 Enter 键时，按下 Shift+Enter 即可进行内容编辑

Question

当用户按回车键时，它会创建 div 来换行，但这会干扰我的标记，因此我必须使用 br 来模仿换行符。但是，我发现操作 contenteditable div 的 html 来插入 br 可能会导致插入符号出现一些不自然的结果位置。因此我决定使用 shift+enter 来创建这些 br。

尝试过:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<div id="inputbox"  contenteditable="true" ></div>

CSS:

<style>
#inputbox[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    float: left;
    color: rgba(134,134,134,0.6);

}
#inputbox{
  background-color:white;
  display:block !important;
  display:inline-block;
  margin-top:2px;
  min-height: 60px;
  text-align: center;
  white-space: break-word !important;
  width:521px;
  padding: 12px;
  border:1px solid #ffcc99;

  border-radius:3px;
  text-align: left;
  vertical-align: bottom;
}
#inputbox:focus{
  outline-style:solid;
  outline-width:0px;
  line-height:normal;
}
</style>

Javascript

<script>


var obj=$("#inputbox");

obj.keydown(function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
         var keyEvent = new KeyboardEvent("keypress", {keycode : 13, shiftKey: true});
        obj.dispatchEvent(keyEvent);
    }
});


</script>

有人可以帮我吗，我已经坚持了三天了。提前致谢。

Answer 1

我创建了一个在 Chrome 中运行良好的 fiddle 。

var shift_pressed = false;

function kd(e) {
  if (e.which === 16) {
    shift_pressed = true;
  } else if (e.which === 13) { // enter
    if (shift_pressed !== true) {
      e.preventDefault();
      document.execCommand("insertHTML", false, '<br>');
      return;
    }
  }
}

function ku(e) {
  if (e.which === 16)
    shift_pressed = false;
}

$(function() {
  $('#editable').on('keydown', kd);
  $('#editable').on('keyup', ku);
});

#editable {
  background-color: white;
  min-height: 150px;
  width: 80%;
  outline: none;
  margin: 20px auto;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">
  Test by typing here
</div>