如何在contenteditable中进行deactive enter事件（仅输入no shift + enter）

问题描述

我想在我的代码中使用 contenteditable 属性，但我有一个问题。

I want to use contenteditable attribute in my code but I have one problem.

点击时我想要的（ shift + enter ）继续下一行（点：我只想转移+输入转到下一行）当我点击此div中的键隐藏文字时 contenteditable 属性。

I want when click (shift + enter) go on next line (point: I want only shift + enter go to next line) and When I click enter key hidden text in this div that has contenteditable attribute.

请指导我。

推荐答案

您可以使用keydown事件。 提供了有关此活动的更多信息。

You can use the keydown event for this. Mdn has more information about this event.

使用以下示例html：

With the following example html:

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

您可以将keydown事件处理程序附加到此元素。然后我们可以使用 event.shiftKey 来检测shiftKey是否与我们的回车键一起被按下。键13是输入键之一。

You can attach an keydown event handler to this element. We can then use the event.shiftKey to detect if the shiftKey is pressed together with our enter key. Key 13 is either of the "enter" keys.

$('#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;
  }
});

---

此片段显示了这一点：

---

This snippets shows this in action:

$('#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>

这篇关于如何在contenteditable中进行deactive enter事件（仅输入no shift + enter）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！