Реальное и сгенерированное нажатие клавиши Enter ведут себя по-разному в редактируемом разделе - PullRequest
Новая
       13

Реальное и сгенерированное нажатие клавиши Enter ведут себя по-разному в редактируемом разделе

0 голосов
/ 23 декабря 2018

Мне нужно изменить редактируемое поведение div с заменой клавиши для добавления новой строки с помощью Enter для Ctrl + Enter.Я попытался сделать это с имитацией события Enter Keyboard, когда пользователь нажал Ctrl + Enter.Это не сработало, и я не понимаю, почему, и это «почему» - мой главный вопрос.

Пример: https://jsfiddle.net/ParadoxMaster/nxjcr7gL/

let editDiv = document.getElementById("edit_div");
let ctrlEnter = false;
editDiv.addEventListener("keydown", function(e) {

  if (e.keyCode == 13 && e.ctrlKey) {

    console.log("Ctrl + Enter");
    ctrlEnter = true;
    let simulatedEnterDown = new KeyboardEvent("keydown", {
      "charCode": e.charCode,
      "bubbles": e.bubbles,
      "cancelable": e.cancelable,
      "composed": e.composed,
      "code": e.code,
      "key": e.key,
      "keyCode": e.keyCode,
      "location": e.location,
      "which": e.which,
      "sourceCapabilities": e.sourceCapabilities,
      "view": e.view
    });
    this.dispatchEvent(simulatedEnterDown);

  } else if (e.keyCode == 13) {

    if (!ctrlEnter) {

      console.log("Just enter down");
      e.preventDefault();

    } else {

      console.log("Fake enter down");
      ctrlEnter = false;

    }

  }
});
div#edit_div {
  background-color: lightskyblue;
  width: 100px;
  height: 30px;
}
<div id="edit_div" contenteditable="true"></div>

Если удалить строку с вызовом PreventDefault, реальные и сгенерированные события будут одинаковыми, но они будут вести себя по-разному.Почему это происходит, и что нужно сделать, чтобы подход работал?

PS Я видел ответ, в котором предлагалось вручную добавить обертки для новой строки, но меня интересует эта опция ссобытия.

...