복붙노트

[JQUERY] jQuery를 함께 '입력'에서 양식을 제출?

JQUERY

jQuery를 함께 '입력'에서 양식을 제출?

해결법


  1. 1.

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

    이 유래 답을 체크 아웃 : 에서는 event.preventDefault () 대 리턴 거짓

    기본적으로, "반환 거짓은"전화 e.preventDefault 및 e.stopPropagation ()와 동일합니다.


  2. 2.제이슨 코헨 언급 한 바와 같이 또한 false를 반환합니다. 당신은 또한 할 수 있습니다로 preventDefault

    제이슨 코헨 언급 한 바와 같이 또한 false를 반환합니다. 당신은 또한 할 수 있습니다로 preventDefault

    e.preventDefault();
    

  3. 3.그것이 도움이 될 것입니다 알고하지 않습니다,하지만 당신은 직접 양식을 제출하는 대신, A는 버튼 클릭을 제출 시뮬레이션을 시도 할 수 있습니다. 내가 생산에 다음 코드를 가지고 있고, 그것을 잘 작동합니다 :

    그것이 도움이 될 것입니다 알고하지 않습니다,하지만 당신은 직접 양식을 제출하는 대신, A는 버튼 클릭을 제출 시뮬레이션을 시도 할 수 있습니다. 내가 생산에 다음 코드를 가지고 있고, 그것을 잘 작동합니다 :

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

    참고 :. Enter 키를 누를 때 jQuery를 ( '# 제출') 초점 () 버튼 애니메이션을 만든다.


  4. 4.계속에서 키 입력을 방지하기 위해 false를 돌려줍니다.

    계속에서 키 입력을 방지하기 위해 false를 돌려줍니다.


  5. 5.엔터 키에 대한 당신 후크해야 할 이유 및 테스트가 있습니까?

    엔터 키에 대한 당신 후크해야 할 이유 및 테스트가 있습니까?

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

    <input type="submit" /> 
    

    누르면 입력 할 때 양식과는 그것은 자연적으로 제출할 수 있나요? 당신은 다음 폼의 onsubmit 행동을 훅하고 당신이 원하는 경우에 거기에서 유효성 검사 함수를 호출 할 수 있습니다 ...

    당신은 당신의 양식이 제출되고 있는지 확인하기 위해 테스트로 태그의 onsubmit을 사용할 수 있지만 그것은 당신이 form.submit ()를 호출하면 작동하지 않습니다.


  6. 6.다음은 jQuery 플러그인으로 할 수있는 방법 (경우에 당신이 기능을 다시 사용하려면이)입니다 :

    다음은 jQuery 플러그인으로 할 수있는 방법 (경우에 당신이 기능을 다시 사용하려면이)입니다 :

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

    이제 당신이이 단순하게의 이러한 유형의 기능을 가진 <입력> 요소를 장식하려는 경우 :

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

  7. 7.또한 단순히 기본 동작을 방지하기 위해 페이지에서 양식 코드에 onsubmit = "반환 false"로 추가 할 수 있습니다.

    또한 단순히 기본 동작을 방지하기 위해 페이지에서 양식 코드에 onsubmit = "반환 false"로 추가 할 수 있습니다.

    그런 다음 양식의이 자바 스크립트 파일에 jQuery를 어떤 기능에 이벤트를 제출 (.bind 또는 .live) 후크.

    여기에 도움을 샘플 코드는 다음과 같습니다

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

    이 파이어 폭스 4.0과 jQuery를 1.4.3로, 2011-04-13의대로 작동


  8. 8.이건 내 코드입니다 :

    이건 내 코드입니다 :

      $("#txtMessage").on( "keypress", function(event) {
        if (event.which == 13 && !event.shiftKey) {
            event.preventDefault();
            $("#frSendMessage").submit();
        }
        });
    

  9. 9.또한 접근성을 유지하기 위해, 당신은 당신의 키 코드를 확인하려면이를 사용한다 :

    또한 접근성을 유지하기 위해, 당신은 당신의 키 코드를 확인하려면이를 사용한다 :

    c = e.which ? e.which : e.keyCode;
    
    if (c == 13) ...
    

  10. 10.그냥 쉽게 구현을위한 추가. 당신은 단순히 양식을 확인한 다음 제출 버튼을 숨길 수 있습니다 :

    그냥 쉽게 구현을위한 추가. 당신은 단순히 양식을 확인한 다음 제출 버튼을 숨길 수 있습니다 :

    예를 들면 :

    <form action="submit.php" method="post">
    Name : <input type="text" name="test">
    <input type="submit" style="display: none;">
    </form>
    

  11. 11.지금 사용

    지금 사용

    $("form").submit(function(event){
    ...
    }
    

    처음 엔 저에 대한 오류를 생성 한 제출 버튼에 이벤트 핸들러를 추가했습니다.


  12. 12.나는 Enter 키를 타격 할 때를 keyDown () 또는 대신의 keyup ()로 전환 할 수 있도록 키를 누를 때 이벤트가 해고되지 오늘 발견.

    나는 Enter 키를 타격 할 때를 keyDown () 또는 대신의 keyup ()로 전환 할 수 있도록 키를 누를 때 이벤트가 해고되지 오늘 발견.

    내 테스트 스크립트 :

            $('.module input').keydown(function (e) {
                var keyCode = e.which;
                console.log("keydown ("+keyCode+")")
                if (keyCode == 13) {
                    console.log("enter");
                    return false;
                }
            });
            $('.module input').keyup(function (e) {
                var keyCode = e.which;
                console.log("keyup ("+keyCode+")")
                if (keyCode == 13) {
                    console.log("enter");
                    return false;
                }
            });
            $('.module input').keypress(function (e) {
                var keyCode = e.which;
                console.log("keypress ("+keyCode+")");
                if (keyCode == 13) {
                    console.log("Enter");
                    return false;
                }
            });
    

    입력 키보드의 "A는 B를 입력"콘솔의 출력 :

    keydown (65)
    keypress (97)
    keyup (65)
    
    keydown (13)
    enter
    keyup (13)
    enter
    
    keydown (66)
    keypress (98)
    keyup (66)
    

    사용자는 '누르기'이없는 제 2 시퀀스로 표시되지만를 keyDown 및 / 가압 해제되는 것으로 부호 '13'REGISTER의 keyup. () 함수의 키에 jQuery를 문서에 따라 :

    Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
    

    서버 2012 R2에서 IE11과 FF61에서 테스트


  13. 13.HTML 코드에서 :

    HTML 코드에서 :

    <form action="POST" onsubmit="ajax_submit();return false;">
        <b>First Name:</b> <input type="text" name="firstname" id="firstname">
        <br>
        <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
        <br>
        <input type="submit" name="send" onclick="ajax_submit();">
    </form>
    

    JS 코드에서 :

    function ajax_submit()
    {
        $.ajax({
            url: "submit.php",
            type: "POST",
            data: {
                firstname: $("#firstname").val(),
                lastname: $("#lastname").val()
            },
            dataType: "JSON",
            success: function (jsonStr) {
                // another codes when result is success
            }
        });
    }
    

  14. 14.이 시도:

    이 시도:

    var form = document.formname;
    
    if($(form).length > 0)
    {
        $(form).keypress(function (e){
            code = e.keyCode ? e.keyCode : e.which;
            if(code.toString() == 13) 
            {
                 formsubmit();
            }
        })
    }
    
  15. from https://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery by cc-by-sa and MIT license