Làm cách nào để ngăn nhấn phím ENTER để gửi biểu mẫu web?

Làm thế nào để bạn ngăn chặn một ENTERphím bấm gửi biểu mẫu trong một ứng dụng dựa trên web?

[ sửa đổi 2012, không xử lý nội tuyến, bảo quản xử lý nhập văn bản]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Bây giờ bạn có thể xác định trình xử lý nhấn phím trên biểu mẫu:
<form [...] onkeypress = "return check Entry (event)">

document.querySelector('form').onkeypress = checkEnter;

Đây là một trình xử lý jQuery có thể được sử dụng để dừng nhập các lần gửi và cũng dừng phím backspace -> back. Các cặp (keyCode: selectorString) trong đối tượng "keyStop" được sử dụng để khớp với các nút không nên kích hoạt hành động mặc định của chúng.

Hãy nhớ rằng web phải là một nơi có thể truy cập và điều này đang phá vỡ sự mong đợi của người dùng bàn phím. Điều đó nói rằng, trong trường hợp của tôi, ứng dụng web tôi đang làm việc không giống như nút quay lại, vì vậy vô hiệu hóa phím tắt của nó là OK. Cuộc thảo luận "nên nhập -> gửi" rất quan trọng, nhưng không liên quan đến câu hỏi thực tế được hỏi.

Đây là mã, tùy thuộc vào bạn để suy nghĩ về khả năng truy cập và lý do tại sao bạn thực sự muốn làm điều này!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Đơn giản chỉ cần trả về false từ trình xử lý onsubmit

<form onsubmit="return false;">

hoặc nếu bạn muốn một người xử lý ở giữa

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Bạn sẽ phải gọi chức năng này mà sẽ chỉ hủy hành vi gửi mặc định của biểu mẫu. Bạn có thể đính kèm nó vào bất kỳ trường đầu vào hoặc sự kiện.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

Phím ENTER chỉ kích hoạt nút gửi mặc định của biểu mẫu, đây sẽ là nút đầu tiên

<input type="submit" />

trình duyệt tìm thấy trong mẫu.

Do đó, không có nút gửi, nhưng một cái gì đó như

<input type="button" value="Submit" onclick="submitform()" /> 

BIÊN TẬP : Đáp lại thảo luận trong các bình luận:

Điều này không hoạt động nếu bạn chỉ có một trường văn bản - nhưng có thể đó là hành vi mong muốn trong trường hợp đó.

Vấn đề khác là điều này phụ thuộc vào Javascript để gửi biểu mẫu. Đây có thể là một vấn đề từ quan điểm tiếp cận. Điều này có thể được giải quyết bằng cách viết <input type='button'/>bằng javascript, và sau đó đặt một <input type='submit' />trong<noscript> thẻ vào thẻ. Hạn chế của phương pháp này là đối với các trình duyệt bị vô hiệu hóa javascript, sau đó bạn sẽ có biểu mẫu gửi trên ENTER. Tùy thuộc vào OP để quyết định hành vi mong muốn trong trường hợp này là gì.

Tôi biết không có cách nào để làm điều này mà không cần gọi javascript.

Trong câu trả lời ngắn gọn trong Javascript thuần túy là:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

Điều này chỉ vô hiệu hóa hành động nhấn phím "Enter" cho kiểu nhập = 'văn bản'. Khách truy cập vẫn có thể sử dụng phím "Enter" trên toàn bộ trang web.

Nếu bạn cũng muốn tắt "Enter" cho các hành động khác, bạn có thể thêm console.log (e); cho mục đích thử nghiệm của bạn và nhấn F12 bằng chrome, hãy chuyển đến tab "console" và nhấn "backspace" trên trang và nhìn vào bên trong để xem giá trị nào được trả về, sau đó bạn có thể nhắm mục tiêu tất cả các tham số đó để tăng cường hơn nữa mã ở trên để phù hợp với nhu cầu của bạn về "e.target.nodeName" , "e.target.type" và nhiều hơn nữa ...

Xem câu trả lời chi tiết của tôi cho một câu hỏi tương tự ở đây

Tất cả các câu trả lời tôi tìm thấy về chủ đề này, ở đây hoặc trong các bài đăng khác đều có một nhược điểm và đó là nó cũng ngăn chặn trình kích hoạt thay đổi thực tế trên thành phần biểu mẫu. Vì vậy, nếu bạn chạy các giải pháp này, sự kiện onchange cũng không được kích hoạt. Để khắc phục vấn đề này, tôi đã sửa đổi các mã này và tự mình phát triển mã sau đây. Tôi hy vọng điều này trở nên hữu ích cho những người khác. Tôi đã tạo một lớp cho biểu mẫu của mình "ngăn chặn_auto_submit" và thêm JavaScript sau:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

Tôi đã luôn làm điều đó với một trình xử lý nhấn phím như trên trong quá khứ, nhưng hôm nay đánh vào một giải pháp đơn giản hơn. Phím enter chỉ kích hoạt nút gửi không bị vô hiệu hóa đầu tiên trên biểu mẫu, vì vậy thực tế tất cả những gì cần thiết là chặn nút đó đang cố gửi:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Đó là nó. Các phím bấm sẽ được xử lý như bình thường bởi trình duyệt / các trường / v.v. Nếu logic enter-submit được kích hoạt, thì trình duyệt sẽ tìm thấy nút gửi ẩn đó và kích hoạt nó. Và trình xử lý javascript sau đó sẽ ngăn chặn sự phục tùng.

Tôi đã dành một chút thời gian để tạo trình duyệt chéo này cho IE8,9,10, Opera 9+, Firefox 23, Safari (PC) và Safari (MAC)

Ví dụ về JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Mã cơ sở - Gọi chức năng này thông qua "onkeypress" được đính kèm với biểu mẫu của bạn và chuyển "window.event" vào đó.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Sau đó trên mẫu của bạn:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Mặc dù vậy, sẽ tốt hơn nếu bạn không sử dụng JavaScript gây khó chịu.

Trong trường hợp của tôi, jQuery JavaScript này đã giải quyết vấn đề

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Ngăn chặn "ENTER" để gửi biểu mẫu có thể gây bất tiện cho một số người dùng của bạn. Vì vậy, sẽ tốt hơn nếu bạn làm theo quy trình dưới đây:

Viết sự kiện 'onSubmit' trong thẻ biểu mẫu của bạn:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

viết hàm Javascript như sau:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Dù lý do là gì, nếu bạn muốn ngăn việc gửi biểu mẫu khi nhấn phím Enter, bạn có thể viết hàm sau trong javascript:

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

cảm ơn.

Thêm thẻ này vào biểu mẫu của bạn - onsubmit="return false;" Sau đó, bạn chỉ có thể gửi biểu mẫu của mình với một số chức năng JavaScript.

Để ngăn việc gửi biểu mẫu khi nhấn entervào một textareahoặc một inputtrường, hãy kiểm tra sự kiện gửi để tìm loại phần tử nào đã gửi sự kiện.

ví dụ 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Một giải pháp tốt hơn là nếu bạn không có nút gửi và bạn khởi động sự kiện bằng một nút bình thường. Sẽ tốt hơn vì trong lần thi đầu tiên, 2 sự kiện gửi được thực hiện, nhưng trong ví dụ thứ hai chỉ có 1 sự kiện gửi được thực hiện.

Ví dụ 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Bạn sẽ thấy điều này đơn giản và hữu ích hơn: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

Làm thế nào về:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Vui lòng kiểm tra bài viết này Làm thế nào để ngăn nhấn phím ENTER để gửi biểu mẫu web?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Bạn có thể bẫy phím tắt trên một biểu mẫu trong javascript và ngăn chặn sự sủi bọt, tôi nghĩ vậy. ENTER trên một trang web về cơ bản chỉ cần gửi biểu mẫu mà điều khiển hiện được chọn được đặt vào.

Liên kết này cung cấp giải pháp đã hoạt động cho tôi trong Chrome, FF và IE9 cộng với trình giả lập cho IE7 và 8 đi kèm với công cụ dành cho nhà phát triển của IE9 (F12).

http://webchcoateet.com/javascript/disable_enter_key.php

Một cách tiếp cận khác là nối thêm nút gửi vào biểu mẫu chỉ khi nó được gửi và thay thế nó bằng một div đơn giản trong quá trình điền vào biểu mẫu

Chỉ cần thêm thuộc tính này vào thẻ FORM của bạn:

onsubmit="return gbCanSubmit;"

Sau đó, trong thẻ SCRIPT của bạn, thêm điều này:

var gbCanSubmit = false;

Sau đó, khi bạn tạo một nút hoặc vì bất kỳ lý do nào khác (như trong một hàm), cuối cùng bạn cũng cho phép gửi, chỉ cần lật boolean toàn cầu và thực hiện cuộc gọi .submit (), tương tự như ví dụ này:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Tôi đã tự mình bắt gặp điều này bởi vì tôi có nhiều nút gửi với các giá trị 'tên' khác nhau, để khi gửi chúng thực hiện những việc khác nhau trên cùng một tệp php. Cácenter / returnvỡ nút này là những giá trị không được nộp. Vì vậy, tôi đã suy nghĩ, nút enter/ returnkích hoạt nút gửi đầu tiên trong biểu mẫu? Bằng cách đó, bạn có thể có nút gửi 'vanilla' bị ẩn hoặc có giá trị 'tên' trả lại tệp php đang thực thi trở lại trang có biểu mẫu trong đó. Hoặc là một giá trị 'tên' mặc định (ẩn) mà phím nhấn kích hoạt và các nút gửi ghi đè lên các giá trị 'tên' của riêng chúng. Chỉ là một ý nghĩ.

Làm thế nào về:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

Và chỉ cần đặt tên cho nút của bạn là đúng và nó vẫn sẽ gửi, nhưng các trường văn bản, ví dụ như rõ ràng Mục tiêu rõ ràng khi bạn nhấn return trong một, sẽ không có tên đúng.

Điều này làm việc cho tôi.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Đây là cách tôi làm:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

đưa vào tập tin bên ngoài javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

hoặc một nơi nào đó bên trong thẻ cơ thể

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Tôi đã có cùng một vấn đề (biểu mẫu với hàng tấn trường văn bản và người dùng không có kỹ năng).

Tôi đã giải quyết nó theo cách này:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

sử dụng mã này trong mã HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

Theo cách này, ENTERkhóa hoạt động theo kế hoạch, nhưng cần phải có xác nhận (một lần ENTERnhấn thứ hai ).

Tôi để lại cho độc giả nhiệm vụ tìm kiếm một kịch bản gửi người dùng trong trường mà anh ta nhấn ENTERnếu anh ta quyết định ở lại biểu mẫu.