ENTER 키를 누를 때 웹 양식 제출을 방지하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-17 21:02:02

원래의

387명이 탐색했습니다.

How to Prevent Web Form Submission on ENTER Keypress?

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

웹 기반 애플리케이션을 설계할 때 Enter 키를 눌러 양식을 제출하지 못하게 하는 것이 바람직한 경우가 많습니다. . 이는 JavaScript를 사용하여 수행할 수 있습니다.

해결책:

Revision 2012(인라인 핸들러)

checkEnter 함수 정의 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;

로그인 후 복사

이렇게 하면 텍스트 영역을 제외한 모든 요소에 대해 ENTER에서 제출이 방지됩니다.

개정 2024(이벤트 위임)

이벤트 위임을 사용하여 보다 현대적인 접근 방식 구현:

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

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

로그인 후 복사

ENTER에서 제출하려는 요소에 data-enter-for-submit 속성을 추가합니다. :

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

로그인 후 복사

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