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中运行良好的小提琴。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript：如何制作：当用户按下回车键时，按住Shift键进入按键状态

1 个答案: