ENTER 키를 누를 때 양식 제출을 중지하는 방법은 무엇입니까?

ENTER 키를 누를 때 양식 제출 방지

웹 애플리케이션에서는 양식을 제출할 때 Enter 키를 사용하는 경우가 많습니다. 그러나 Enter 키를 누를 때 양식이 제출되지 않도록 하는 것이 바람직한 경우도 있습니다. 다음은 이를 달성하는 두 가지 방법입니다.

방법 1: Onkeypress 핸들러

이 방법은 양식에서 onkeypress 이벤트 핸들러를 사용합니다. 누른 키가 ENTER(키 코드 13)인지 확인하고 ENTER가 아닌 경우에만 양식 제출을 허용하는 기능을 만들어서 즉시 양식 제출을 방지할 수 있습니다. 이 접근 방식의 코드는 다음과 같습니다.

function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

방법 2: 최신 JavaScript를 사용한 이벤트 위임

ES20xx 및 이벤트 위임을 사용하는 보다 현대적인 접근 방식에는 키 누르기 리스너 설정이 포함됩니다. 문서 전체에. 이 메소드는 대상 입력이 포함된 양식에 ENTER 키를 누르면 양식을 제출해야 함을 나타내는 특수 속성이 있는지 확인합니다. 관련 JavaScript 및 HTML 코드:

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

<form>

이 두 가지 방법 모두 ENTER 키를 누를 때 양식이 제출되는 것을 효과적으로 방지하는 동시에 줄 바꿈에 ENTER를 자연스럽게 사용하는 텍스트 영역 입력이 정상적으로 작동하도록 허용합니다.

위 내용은 ENTER 키를 누를 때 양식 제출을 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!