웹 응용 프로그램에서 Enter 키를 누를 때 원치 않는 양식 제출을 방지하는 방법은 무엇입니까?

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

웹 기반 애플리케이션에서 ENTER 키로 인해 의도하지 않은 양식 제출이 발생하면 문제가 될 수 있습니다. 이 가이드는 이러한 원치 않는 동작을 방지하는 솔루션을 제공합니다.

해결책 1: 사용자 정의 키 누르기 핸들러

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를 사용한 이벤트 위임

이벤트 위임을 사용하는 보다 현대적인 접근 방식을 사용하여 ENTER 키를 처리할 수 있습니다. 이 접근 방식에는 문서 수준에서 이벤트를 캡처하고 가장 가까운 양식 조상을 확인하는 작업이 포함됩니다. data-enter-for-submit 속성이 있는 지정된 요소만 ENTER에서 양식 제출을 트리거합니다.

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;
    }
  }
}

추가 참고 사항

• 텍스트 영역은 ENTER를 누르는 것과 같이 다르게 처리되어야 합니다. 텍스트 영역은 일반적으로 줄 바꿈을 의미합니다.
• 제공되는 코드 조각은 사용자 정의가 가능하며 특정 애플리케이션 요구 사항에 맞게 조정할 수 있습니다.

위 내용은 웹 응용 프로그램에서 Enter 키를 누를 때 원치 않는 양식 제출을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!