首页 >web前端 >css教程 >如何使用 jQuery 或 JavaScript 检测'Shift Enter”并在文本区域中创建新行?

如何使用 jQuery 或 JavaScript 检测'Shift Enter”并在文本区域中创建新行?

Linda Hamilton
Linda Hamilton原创
2024-12-06 01:51:09370浏览

How to Detect

使用 jQuery 检测“Shift Enter”并在文本区域中生成新行

在 Web 表单中,在文本区域中按“Enter”通常会提交形式。但是,您可能想要实现不同的行为,例如在按下“Shift Enter”时创建新行。

jQuery 解决方案

$("#textarea_id").on("keydown", function(evt) {
  if (evt.keyCode == 13 && evt.shiftKey) {
    // Insert a newline character
    if (evt.type == "keypress") {
      pasteIntoInput(this, "\n");
    }
    // Prevent form submission
    evt.preventDefault();
  }
});

function pasteIntoInput(el, text) {
  el.focus();
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    var val = el.value;
    var selStart = el.selectionStart;
    el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
    el.selectionEnd = el.selectionStart = selStart + text.length;
  } else if (typeof document.selection != "undefined") {
    var textRange = document.selection.createRange();
    textRange.text = text;
    textRange.collapse(false);
    textRange.select();
  }
}

纯 JavaScript 解决方案

var textarea = document.querySelector("#textarea_id");

textarea.addEventListener("keydown", function(evt) {
  if (evt.keyCode == 13 && evt.shiftKey) {
    if (evt.type == "keypress") {
      pasteIntoInput(this, "\n");
    }
    evt.preventDefault();
  }
});

以上是如何使用 jQuery 或 JavaScript 检测'Shift Enter”并在文本区域中创建新行?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn