[javascript] jQuery로 ‘Enter’에 양식을 제출 하시겠습니까?

JAVASCRIPT / 글쓴이

HTML / jQuery를 사용하는 AIR 프로젝트의 전자 메일 텍스트 필드, 암호 필드 및 제출 단추와 같은 늪지 표준 로그인 양식이 있습니다. 양식에서 Enter 키를 누르면 전체 양식의 내용이 사라지지만 양식은 제출되지 않습니다. 누구나 이것이 Webkit 문제인지 (Adobe AIR에서 HTML에 Webkit을 사용하는지) 또는 내가 묶은 것을 알고 있습니까?

나는 시도했다 : 

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

그러나 그것은 지우기 행동을 멈추거나 양식을 제출하지 않았습니다. 양식과 관련된 작업이 없습니다. 문제가 될 수 있습니까? 액션에 자바 스크립트 함수를 넣을 수 있습니까?

답변

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

이 stackoverflow 답변을 확인하십시오 :
event.preventDefault () vs. false 반환

기본적으로, “반환 거짓은”호출과 동일 e.preventDefault하고 e.stopPropagation().

답변

Jason Cohen이 언급했듯이 false를 반환합니다. 당신은 또한 방지해야 할 수도 있습니다

e.preventDefault();

답변

도움이 될지 모르겠지만 양식을 직접 제출하는 대신 제출 버튼 클릭을 시뮬레이션 할 수 있습니다. 프로덕션에 다음 코드가 있으며 정상적으로 작동합니다.

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

참고 : jQuery ( ‘# submit’). focus () 는 Enter 키를 누를 때 버튼에 애니메이션 효과를줍니다.

답변

false키 입력이 계속되지 않도록하려면 돌아가십시오 .

답변

Enter 키를 연결하고 테스트해야하는 이유가 있습니까?

당신은 단순히 추가 할 수 없습니다 

<input type="submit" />

당신의 양식에 입력하고 enter를 눌렀을 때 자연스럽게 제출됩니까? 원하는 경우 폼의 onsubmit동작 을 연결하고 원하는 경우 유효성 검사 함수를 호출 할 수 있습니다 …

onsubmit양식을 제출했는지 테스트하기 위해 테스트로 사용할 수도 있지만을 호출하면 작동하지 않습니다 form.submit().

답변

이 기능을 JQuery 플러그인으로 사용하는 방법은 다음과 같습니다 (기능을 재사용하려는 경우).

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

<input>이 유형의 기능으로 요소 를 장식하려면 다음 과 같이 간단합니다.

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

답변

onsubmit="return false"기본 동작을 방지하기 위해 페이지의 양식 코드에 간단히 추가 할 수도 있습니다.

그런 다음 후크 ( .bind또는 .live양식의) submit자바 스크립트 파일에서 jQuery로 모든 기능에 이벤트를.

다음은 도움이되는 샘플 코드입니다.

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

자바 스크립트 + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

이것은 Firefox 4.0 및 jQuery 1.4.3에서 2011-04-13부터 작동합니다.