Javascript：如何制作：當用戶按下回車鍵時，按住Shift鍵進入按鍵狀態

Question

當用戶按Enter鍵時，會為換行創建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中運行良好的小提琴。

 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>