jQuery와 함께 'Enter'에 대한 양식을 제출하시겠습니까?

jQuery와 함께 'Enter'에 대한 양식을 제출하시겠습니까?

HTML/jQuery를 사용하는 AIR 프로젝트의 bog-standard 로그인 폼(이메일 텍스트 필드, 비밀번호 필드 및 제출 버튼)을 가지고 있습니다.폼에서 Enter 키를 누르면 폼 전체가 사라지지만 폼이 전송되지 않습니다.Webkit의 문제인지(Adobe AIR는 HTML용 Webkit을 사용하고 있다), 또는 제가 일을 망쳤는지 아는 사람이 있습니까?

나는 시도했다.

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

하지만 그렇다고 정리 행위를 중단하거나 양식을 제출하지는 않았습니다.양식과 관련된 작업이 없습니다. 그게 문제일까요?javascript 기능을 액션에 넣을 수 있습니까?

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

stackoverflow 응답 event.preventDefault() vs.return false를 확인합니다.

기본적으로 "return 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" /> 

입력이 밀리면 자연스럽게 제출되는 건가요?그러면 용지를 걸 수 있습니다.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) 폼의submitjQuery를 사용하여 javascript 파일에 있는 함수에 이벤트를 표시합니다.

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

HTML

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

Javascript + jQuery

$(document).ready(function() {

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

이것은 Firefox 4.0 및 jQuery 1.4.3에서 2011년 4월 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) ...

간단한 구현을 위해 추가만 하면 됩니다.폼을 작성한 후 [Submit]버튼을 숨길 수 있습니다.

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

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

나는 지금 사용하고 있다

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

처음에 이벤트 핸들러를 Submit 버튼에 추가했기 때문에 오류가 발생하였습니다.

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)

두 번째 시퀀스에서는 '키 누름'이 누락되어 있지만, 키 다운 및 키 업 레지스터 코드 '13'이 눌리거나 해제된 것을 볼 수 있습니다.keypress() 함수의 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에서 테스트 완료

늦었지만 html에서 아래 행을 추가할 수 있습니다.-

<input onkeyup="submitForm(event)" oninput="addTextName(this)" type="text" id="name-val">

그리고 이것을 js 파일에 추가합니다.

function submitForm(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 13){
    toggleNextScreen();
}

}

keycode 13은 Enter를 의미합니다.

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

$('form#login').keypress(function (e) {
   var keyCode = e.keyCode ? e.keyCode : e.which;       
   if (keyCode == 13) 
   {
      e.preventDefault();
      $('form#login').submit();
      return false; 
   }
});

이것을 시험해 보세요.

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