javascript - 추가 - 제이쿼리 placeholder 변경

jQuery에서 'Enter'에 양식 제출? (10)

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

HTML / jQuery를 사용하는 AIR 프로젝트에는 전자 메일 텍스트 필드, 암호 필드 및 제출 버튼과 같은 늪지 표준 로그인 양식이 있습니다. 양식에서 Enter 키를 누르면 전체 양식의 내용이 사라지지만 양식은 제출되지 않습니다. 누구든지 이것이 웹킷 문제인지 (Adobe AIR는 HTML 용 Webkit을 사용함), 또는 내가 헛소리했는지 알 수 있습니까?

나는 시도했다 :

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

그러나 그것은 개간 행동을 중단 시키거나 양식을 제출하지 않았습니다. 양식과 관련된 조치가 없습니다. 문제가 될 수 있습니까? 액션에 자바 스크립트 함수를 넣을 수 있습니까?

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

그런 다음 javascript 파일의 jQuery를 사용하여 양식의 submit 이벤트를 모든 함수에 연결 ( .bind 또는 .bind )합니다.

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

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

이 기능은 2011-04-13 현재 Firefox 4.0 및 jQuery 1.4.3에서 작동합니다.

다음은이 기능을 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
    } );

도움이 될지 모르겠지만 직접 양식을 제출하는 대신 제출 버튼 클릭을 시뮬레이션 해 볼 수 있습니다. 나는 프로덕션에서 다음 코드를 가지고 있으며 잘 작동한다.

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

참고 : jQuery ( '# submit'). focus () 는 enter 키를 누르면 버튼을 애니메이션으로 만듭니다.

또한 접근성을 유지하려면 키 코드를 결정할 때이 기능을 사용해야합니다.

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>

이 시도:

var form = document.formname;

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

이것은 내 코드입니다.

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

키 스트로크가 계속되는 것을 막기 위해서 (때문에) false 를 돌려줍니다.

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

참고 : bendewey의 대답을 수락했지만 e.preventDefault ()에 대한 설명이 잘못되었습니다. 이 대답을 확인하십시오 : event.preventDefault () 대 false 반환

본질적으로 "return false"는 e.preventDefault 및 e.stopPropagation() 을 호출하는 것과 같습니다.