> 웹 프론트엔드 > JS 튜토리얼 > form_javascript 기술을 제출하기 위해 Enter 키를 누르는 것을 비활성화하는 방법

form_javascript 기술을 제출하기 위해 Enter 키를 누르는 것을 비활성화하는 방법

WBOY
풀어 주다: 2016-05-16 15:55:48
원래의
1717명이 탐색했습니다.

자동 제출이 발생하는 경우 다음 두 가지 가능성이 있습니다.

첫 번째는 사용자가 Enter 키를 클릭하면 js 이벤트 수신 메커니즘을 통해 양식 제출이 트리거되는 것입니다.

두 번째는 브라우저의 기본 동작을 활용하는 것입니다(적어도 제가 찾은 내용은 이렇습니다). 예를 들어, 페이지에 양식과 제출 버튼이 있는 경우 페이지가 열리면 자동으로 제출 버튼에 초점이 맞춰집니다. 마찬가지로, 양식에 단 하나의 텍스트 입력 필드(텍스트)만 있는 경우 이 입력 필드에서 Enter 키를 누르면 브라우저가 자동으로 양식을 제출합니다.

우리는 일반적으로 첫 번째 상황에 대해 알고 있으며 이해하기 쉽지만 두 번째 브라우저의 기본 동작에 대해서는 이를 아는 사람이 더 적을 수 있습니다(적어도 IE의 경우). 양식 제출 시 기본 동작.

양식에 한 줄 텍스트 입력 필드가 포함된 경우, 포함된 다른 유형의 양식 구성 요소 수에 관계없이 입력 필드에서 Enter 키를 클릭하면 양식이 자동으로 제출됩니다.

예를 들어 다음 코드는 다음과 같습니다.

<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="checkbox">sdfsdf
<input type="hidden"name="aa"/></form>
로그인 후 복사

양식에 두 개 이상의 한 줄 텍스트 입력 필드가 포함된 경우 다른 유형의 양식 구성 요소가 포함되어 있는지 여부에 관계없이 Enter 키를 눌러도 자동으로 제출되지 않습니다. 예:

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form
로그인 후 복사

방법은 매우 간단합니다. 위에 제시한 예에 이미 나와 있습니다. 자동으로 제출하지 않으려면 쓸모 없는 입력 상자를 추가해야 한다고 말할 수 있습니다. 최종 사용자가 두 개의 입력 상자를 사용할 수 있습니까? 실제로 스타일을 통해 새로 추가된 입력 상자를 숨길 수 있습니다. 예:

<form action="" method="post"
<input type="text" name="notautosubmit"
style="display:none"/
<input type="text"
name="username"/</form
로그인 후 복사

버튼 버튼 입력 트리거 이벤트를 바인딩하는 방법도 있습니다.
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}} 여기서 검색 방법은 onclick 이벤트입니다.

최종 해결 방법:

<script language="javascript"> 
  function defineSubmit(btn) 
  { 
    if("submit1" == btn.value) 
    { 
      document.testForm.action="firstAction"; 
    } 
    else 
    { 
      document.testForm.action="secondAction"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name="testForm" method="post"> 
    username:<input type="text" name="username"/> 
    password:<input type="password" name="password"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit1"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/> 
</form> 
로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿