ส่งแบบฟอร์มใน 'Enter' ด้วย jQuery หรือไม่

ฉันมีรูปแบบการเข้าสู่ระบบที่ไม่ได้มาตรฐาน - ฟิลด์ข้อความอีเมลฟิลด์รหัสผ่านและปุ่มส่งในโครงการ AIR ที่ใช้ HTML / jQuery เมื่อฉันกด Enter บนแบบฟอร์มเนื้อหาทั้งหมดของแบบฟอร์มจะหายไป แต่ไม่ได้ส่งแบบฟอร์ม ไม่มีใครรู้ว่านี่เป็นปัญหาของ Webkit (Adobe AIR ใช้ Webkit สำหรับ HTML) หรือว่าฉันทำอะไรผิดพลาดหรือไม่?

ฉันเหนื่อย:

$('.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 () กับ return false

เป็นหลัก "กลับเท็จ" เป็นเช่นเดียวกับการโทรและe.preventDefaulte.stopPropagation()

นอกเหนือจากการคืนค่าเท็จตามที่ Jason Cohen กล่าวถึง คุณอาจต้องป้องกันการผิดเริ่มต้นด้วย

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 ในไฟล์ 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()
    });
});

สิ่งนี้ทำงานได้ตั้งแต่ 2011-04-13 โดยมี Firefox 4.0 และ jQuery 1.4.3

นี่คือรหัสของฉัน:

  $("#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){
...
}

ตอนแรกฉันเพิ่มตัวจัดการเหตุการณ์ในปุ่มส่งซึ่งทำให้เกิดข้อผิดพลาดสำหรับฉัน

ฉันพบว่าวันนี้เหตุการณ์ keypress ไม่ทำงานเมื่อกดปุ่ม 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' เป็นการกด / ปล่อย ตามเอกสาร 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.

ทดสอบบน IE11 และ FF61 บนเซิร์ฟเวอร์ 2012 R2

ในรหัส 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
        }
    });
}

ลองสิ่งนี้:

var form = document.formname;

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