jquery - contenteditableでEnterイベントを無効にする方法（Shift + Enterなしでのみ入力）

Question

contenteditableコードで属性を使用したいのですが、問題が 1 つあります。

クリックすると（シフト+エンター）次の行に移動し（ポイント：シフト+エンターのみが次の行に移動しcontenteditableます）、クリックすると、 属性を持つこのdivにキーの非表示のテキストを入力します。

それについて私を案内してください。

Answer 1

これには keydown イベントを使用できます。Mdnには、このイベントに関する詳細情報があります。

次の例の html を使用します。

<div id="pinky" contenteditable="true">Pink unicorns are blue</div>

この要素に keydown イベント ハンドラーをアタッチできます。次に、を使用しevent.shiftKeyて、shiftKey がエンター キーと一緒に押されたかどうかを検出できます。キー 13 は「エンター」キーのいずれかです。

$('#pinky').on('keydown', function(e) {
  if (e.which === 13 && e.shiftKey === false) {
    //Prevent insertion of a return
    //You could do other things here, for example
    //focus on the next field
    return false;
  }
});

---

このスニペットは、これを実際に示しています。

$('#pinky').on('keydown', function(e) {
  if (e.which === 13 && e.shiftKey === false) {
    //Prevent insertion of a return
    //You could do other things here, for example
    //focus on the next field
    return false;
  }
});

#pinky {
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="pinky" contenteditable="true">Pink unicorns are blue</div>