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

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

웹 기반 애플리케이션에서 ENTER 키를 눌러 양식을 제출하지 못하게 하면 해당 양식만 사용자가 명시적으로 제출 버튼을 클릭하면 제출됩니다. 이 접근 방식은 사용자 경험을 향상시키고 우발적인 양식 제출을 방지합니다.

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

checkEnter 함수를 사용하면 이를 양식에 키 누르기 핸들러로 첨부할 수 있습니다.

<form [...] onkeypress="return checkEnter(event)">

또는 다음을 수행할 수 있습니다. 다음 ES20xx 접근 방식을 사용하십시오.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!