Press Shift and Enter for a new line【按 Shift 和 Enter 键以创建新行】

136 阅读1分钟

By default, pressing Enter or Shift and Enter will generate a new line for a textarea element.

【默认情况下,按下“Enter”或“Shift”和“Enter”将为文本区域元素生成新行。】

In some cases such as an inline editable element, or a messaging application, you would like to submit the data when user presses Enter. The only way to generate a new line is to press Shift and Enter.

【在某些情况下,例如内联可编辑元素或消息传递应用程序中,您可能希望用户在按下“Enter”时提交数据。生成新行的唯一方法是同时按下“Shift”和“Enter”。】

Assume that we have the following textarea element:

【假设我们有以下textarea元素:】

<textarea id="message"></textarea>

To prevent the default behavior of pressing the Enter key, we can handle the keydown event:

【为了阻止按下“Enter”键的默认行为,我们可以处理“keydown”事件:】

const ele = document.getElementById('message');

ele.addEventListener('keydown', function (e) {
  // Get the code of pressed key
  const keyCode = e.which || e.keyCode;

  // 13 represents the Enter key
  if (keyCode === 13 && !e.shiftKey) {
    // Don't generate a new line
    e.preventDefault();

    // Do something else such as send the message to back-end
    // ...
  }
});

In the demo below, pressing Enter will do nothing:

【在下面的演示中,按下“Enter”键将不会执行任何操作:】

Demo

<div style="margin: 3rem auto; width: 16rem">
  <textarea
    rows="5"
    id="message"
    style="border: 1px solid #cbd5e0; padding: 0.5rem; width: 100%"
    placeholder="Shift + Enter for a new line"
    ></textarea>
</div>
document.addEventListener('DOMContentLoaded', function () {
  const ele = document.getElementById('message');

  ele.addEventListener('keydown', function (e) {
    const keyCode = e.which || e.keyCode;
    // 13 represents the Enter key
    if (keyCode === 13 && !e.shiftKey) {
      // Don't generate a new line
      e.preventDefault();

      // Do something else such as send the message to back-end ...
    }
  });
});

原文:phuoc.ng/collection/…