>웹 프론트엔드 >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" 감지 및 새 줄 생성

웹 양식의 경우 일반적으로 텍스트 영역에서 "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으로 문의하세요.