jQuery または JavaScript を使用して「Shift Enter」を検出し、テキストエリアに新しい行を作成する方法

jQuery を使用してテキストエリアに「Shift Enter」を検出し、新しい行を生成する

Web フォームでは、通常、テキストエリアで「Enter」を押すと、フォーム。ただし、「Shift Enter」を押したときに新しい行を作成するなど、別の動作を実装することもできます。

jQuery Solution

$("#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 中国語 Web サイトの他の関連記事を参照してください。