jQuery로 'Enter'에 양식을 제출 하시겠습니까?

jQuery로 'Enter'에 양식을 제출 하시겠습니까?

---

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

참고 : bendewey의 답변을 수락했지만 e.preventDefault ()에 대한 설명이 올바르지 않습니다. 이 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;
                }
            } );
    }

이제 이런 유형의 기능으로 장식하고 싶다면 다음과 같이 간단합니다.

$('#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부터 작동합니다.

---

이것은 내 코드입니다.

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

---

또한 접근성을 유지하려면 다음을 사용하여 키 코드를 결정해야합니다.

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

---

쉬운 구현을 위해 추가하기 만하면됩니다. 간단히 양식을 만든 다음 제출 버튼을 숨길 수 있습니다.

예를 들면 다음과 같습니다.

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

---

나는 지금 사용한다

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

처음에는 이벤트 처리기를 제출 버튼에 추가하여 오류가 발생했습니다.

---

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

---

오늘 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 Enter B"를 입력 할 때 콘솔의 출력 :

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

두 번째 시퀀스에서 'keypress'가 누락되었지만 keydown 및 keyup register code '13'이 눌렸거나 놓인 것으로 나타납니다. 당으로서 ) (기능 키를 누를 때의 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.

Server 2012 R2의 IE11 및 FF61에서 테스트

---

이 시도:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

참고 URL : https://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery