Enter 키를 눌러 양식 양식 제출 처리 방법-JS 튜토리얼-php.cn

Enter 키를 눌러 양식 양식 제출 처리 방법

巴扎黑

풀어 주다： 2016-11-25 14:29:47

원래의

1357명이 탐색했습니다.

1. 양식에 하나만 있는 경우 Enter 키를 누르면 자동으로 양식이 제출됩니다.

HTML 코드

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
</form>

로그인 후 복사

다른 를 추가하고 Enter를 누르면 자동으로 제출되지 않지만 페이지에 이해할 수 없는 메시지가 표시됩니다. 꽤 어색해서 인터넷에서 두 가지 해결책을 찾았습니다.

1; 입력 상자를 표시하지 않음을 추가한 다음; return 키를 누른 후에는 제출되지 않습니다:

Html 코드

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
<input style=&#39;display:none&#39; />  
</form>

로그인 후 복사

2 onkeydown 이벤트를 추가하면 Enter 키를 누른 후에는 표시되지 않습니다.

HTML 코드

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13) return false;&#39;/>  
</form>

로그인 후 복사

캐리지 리턴 이벤트를 추가하려면 onkeydown 이벤트에 판단 제출 양식을 추가할 수 있습니다.

Html 코드

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input style=&#39;display:none&#39; />  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown="onKeyQuery(event);" />  
</form>

로그인 후 복사

Js 코드

//回车查询  
   function onKeyQuery(e){  
       if(window.event) // IE  
       {  
           keynum = e.keyCode  
       }  
       else if(e.which) // Netscape/Firefox/Opera  
       {  
           keynum = e.which  
       }  
       if(keynum == 13){  //等于13代表 回车键  
           //具体处理在这里  
       }  
   }

로그인 후 복사

때로는 양식(form)을 제출하기 위해 텍스트 상자(입력 요소)에서 Enter 키를 누르고 싶을 때도 있지만 때로는 이것을 원하지 않습니다. 예를 들어 검색 동작의 경우 키워드를 입력한 후 Enter 키를 직접 눌러 양식을 즉시 제출하려는 경우 일부 복잡한 양식의 경우 양식 작성을 완료하기 전에 실수로 Enter 키를 눌러 양식 제출을 실행하는 것을 방지할 수 있습니다. .

이러한 동작을 제어하기 위해 브라우저에서 이미 이 작업을 수행할 필요가 없습니다.

type="이 있는 버튼이 있는 경우. submit" 형식으로 입력하면 Enter 키가 적용됩니다.
양식에 type="text"인 입력이 하나만 있는 경우 버튼 유형에 관계없이 Enter 키가 적용됩니다.
버튼이 입력이 아닌 버튼이고 유형이 추가되지 않은 경우 기본값은 IE에서는 type=button, FX에서는 type=submit입니다.
텍스트 영역 및 선택과 같은 다른 양식 요소는 영향을 받지 않으며 라디오 확인란은 트리거 규칙에 영향을 미치지 않지만 FX에서는 Enter 키에 응답하지만 IE에서는 응답하지 않습니다.
type="image" 입력은 type="submit"과 동일한 효과를 갖습니다. 왜 그런 유형이 디자인되었는지 모르겠습니다. CSS를 사용하여 배경을 추가하는 것이 더 적합합니다. 영상.