Ngăn người dùng gửi biểu mẫu bằng cách nhấn Enter

Tôi có một cuộc khảo sát trên một trang web và dường như có một số vấn đề với người dùng nhấn enter (tôi không biết tại sao) và vô tình gửi bản khảo sát (biểu mẫu) mà không nhấp vào nút gửi. Có cách nào để ngăn chặn điều này?

Tôi đang sử dụng HTML, PHP 5.2.9 và jQuery trong khảo sát.

Bạn có thể sử dụng một phương pháp như

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

Khi đọc các bình luận trên bài viết gốc, để làm cho nó dễ sử dụng hơn và cho phép mọi người nhấn Enternếu họ đã hoàn thành tất cả các trường:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

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

Không cho phép nhập khóa ở bất cứ đâu

Nếu bạn không có <textarea>trong mẫu của mình, thì chỉ cần thêm những thứ sau vào <form>:

<form ... onkeydown="return event.key != 'Enter';">

Hoặc với jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Điều này sẽ khiến mọi phím bấm bên trong biểu mẫu sẽ được kiểm tra trên key. Nếu không Enter, nó sẽ trở lại truevà mọi thứ tiếp tục như bình thường. Nếu có Enter, nó sẽ trở lạifalse và mọi thứ sẽ dừng ngay lập tức, vì vậy mẫu đơn sẽ không được gửi.

Sự keydownkiện này được ưu tiên hơn keyupvì keyupquá muộn để chặn biểu mẫu gửi. Trong lịch sử cũng có keypress, nhưng điều này không được chấp nhận, cũng nhưKeyboardEvent.keyCode . Bạn nên sử dụng KeyboardEvent.keythay vì trả về tên của phím được nhấn. Khi nàoEnter được kiểm tra, thì điều này sẽ kiểm tra 13 (nhập bình thường) cũng như 108 (nhập numpad).

Lưu ý rằng $(window)như được đề xuất trong một số câu trả lời khác thay vì$(document) không hoạt động cho keydown/keyup trong IE <= 8, vì vậy đó không phải là một lựa chọn tốt nếu bạn cũng muốn bao gồm cả những người dùng kém đó.

Chỉ cho phép nhập khóa trên textareas

Nếu bạn có một <textarea>biểu mẫu của mình (tất nhiên sẽ chấp nhận phím Enter), sau đó thêm trình xử lý phím tắt cho mọi thành phần đầu vào riêng lẻ không phải là một <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Để giảm bản tóm tắt, điều này tốt hơn là được thực hiện với jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Nếu bạn có các hàm xử lý sự kiện khác được đính kèm trên các phần tử đầu vào đó, vì lý do nào đó bạn cũng muốn gọi phím enter vì một số lý do, thì chỉ ngăn hành vi mặc định của sự kiện thay vì trả về false, vì vậy nó có thể truyền đúng cho các trình xử lý khác.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Cho phép nhập khóa trên textareas và chỉ gửi các nút

Nếu bạn cũng muốn cho phép nhập phím trên các nút gửi <input|button type="submit">, thì bạn luôn có thể tinh chỉnh bộ chọn như bên dưới.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Lưu ý rằng input[type=text]như được đề xuất trong một số câu trả lời khác không bao gồm các đầu vào phi văn bản HTML5 đó, vì vậy đó không phải là một công cụ chọn tốt.

Mục 4.10.22.2 Việc gửi ngầm định của thông số HTML5 W3C nói:

Một formphần tử nút mặc định là người đầu tiên nút gửi trong trật tự cây mà chủ sở hữu dưới hình thức là formyếu tố.

Nếu tác nhân người dùng hỗ trợ cho phép người dùng gửi biểu mẫu ngầm (ví dụ: trên một số nền tảng nhấn phím "enter" trong khi trường văn bản được tập trung hoàn toàn gửi biểu mẫu), thì làm như vậy đối với biểu mẫu có nút mặc định có kích hoạt được xác định hành vi phải khiến tác nhân người dùng chạy các bước kích hoạt nhấp chuột tổng hợp trên nút mặc định đó .

Lưu ý: Do đó, nếu nút mặc định bị tắt, biểu mẫu sẽ không được gửi khi sử dụng cơ chế đệ trình ngầm như vậy. (Nút không có hành vi kích hoạt khi bị tắt.)

Do đó, một cách tuân thủ tiêu chuẩn để vô hiệu hóa bất kỳ nội dung gửi biểu mẫu nào là đặt nút gửi bị vô hiệu hóa làm nút gửi đầu tiên trong biểu mẫu:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Một tính năng hay của phương pháp này là nó hoạt động mà không cần JavaScript ; cho dù JavaScript có được bật hay không, một trình duyệt web tuân thủ tiêu chuẩn là bắt buộc để ngăn chặn việc gửi biểu mẫu ngầm.

Tôi đã phải nắm bắt cả ba sự kiện liên quan đến việc bấm phím để ngăn biểu mẫu được gửi:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Bạn có thể kết hợp tất cả những điều trên thành một phiên bản nhỏ gọn đẹp mắt:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Nếu bạn sử dụng tập lệnh để thực hiện việc gửi thực tế, thì bạn có thể thêm dòng "return false" vào trình xử lý onsubmit như thế này:

<form onsubmit="return false;">

Gọi submit () trên biểu mẫu từ JavaScript sẽ không kích hoạt sự kiện.

Sử dụng:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Giải pháp này hoạt động trên tất cả các biểu mẫu trên một trang web (cũng trên các biểu mẫu được chèn bằng Ajax), chỉ ngăn Enters trong các văn bản đầu vào. Đặt nó trong một chức năng sẵn sàng tài liệu và quên vấn đề này cho một cuộc sống.

Thay vì ngăn người dùng nhấn Enter, điều này có vẻ không tự nhiên, bạn có thể để lại biểu mẫu và thêm một số xác thực phía máy khách bổ sung: Khi kết thúc khảo sát không được gửi đến máy chủ và người dùng nhận được thông báo tốt những gì cần phải được hoàn thành để hoàn thành các hình thức. Nếu bạn đang sử dụng jQuery, hãy thử plugin Xác thực:

http://docs.jquery.com/Plugins/Validation

Điều này sẽ đòi hỏi nhiều công việc hơn là bắt Enternút, nhưng chắc chắn nó sẽ cung cấp trải nghiệm người dùng phong phú hơn.

Một giải pháp jQuery nhỏ đơn giản tốt đẹp:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Tôi chưa thể bình luận, vì vậy tôi sẽ đăng một câu trả lời mới

Câu trả lời được chấp nhận là ok-ish, nhưng nó đã không dừng gửi trên numpad enter. Ít nhất là trong phiên bản hiện tại của Chrome. Tôi đã phải thay đổi điều kiện mã khóa thành cái này, sau đó nó hoạt động.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Đó là giải pháp của tôi để đạt được mục tiêu, nó sạch sẽ và hiệu quả.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Một cách tiếp cận hoàn toàn khác:

1. Đầu tiên <button type="submit">trong mẫu sẽ được kích hoạt khi nhấn Enter.
2. Điều này đúng ngay cả khi nút bị ẩn với style="display:none;
3. Kịch bản cho nút đó có thể quay lại false, hủy bỏ quá trình gửi.
4. Bạn vẫn có thể có một cái khác <button type=submit>để gửi mẫu. Chỉ cần quay trở lại trueđể trình tầng.
5. Nhấn Entertrong khi nút gửi thực sự được tập trung sẽ kích hoạt nút gửi thực sự.
6. Nhấn Enterbên trong <textarea>hoặc các điều khiển biểu mẫu khác sẽ hoạt động như bình thường.
7. Nhấn Entervào bên trong các <input>điều khiển biểu mẫu sẽ kích hoạt cái đầu tiên <button type=submit>, nó sẽ trả về falsevà do đó không có gì xảy ra.

Như vậy:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Đưa ra hình thức một hành động của 'javascript: void (0);' dường như làm trò bịp

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Không đặt một nút gửi có thể làm. Chỉ cần đặt một tập lệnh vào đầu vào (kiểu = nút) hoặc thêm eventListener nếu bạn muốn nó gửi dữ liệu trong biểu mẫu.

Thay vì sử dụng cái này

<input type="button">

hơn là sử dụng cái này

<input type="submit">

1. Không sử dụng type = "submit" cho đầu vào hoặc nút.
2. Sử dụng type = "button" và sử dụng js [Jquery / angular / etc] để gửi biểu mẫu đến máy chủ.

Tôi chỉ cần ngăn chặn các đầu vào cụ thể gửi, vì vậy tôi đã sử dụng một bộ chọn lớp, để cho đây là một tính năng "toàn cầu" bất cứ nơi nào tôi cần.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Và mã jQuery này:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Ngoài ra, nếu không đủ phím tắt:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Một số lưu ý:

Sửa đổi nhiều câu trả lời hay ở đây, Enterkhóa dường như hoạt động keydowntrên tất cả các trình duyệt. Đối với giải pháp thay thế, tôi được cập nhật bind()để các on()phương pháp.

Tôi là một fan hâm mộ lớn của các công cụ chọn lớp, cân nhắc tất cả các ưu và nhược điểm và thảo luận về hiệu suất. Quy ước đặt tên của tôi là 'idS Something' để chỉ ra jQuery đang sử dụng nó làm id, để tách nó khỏi kiểu CSS.

Bạn có thể tạo một phương thức JavaScript để kiểm tra xem Enterkhóa có bị đánh hay không và nếu có, để dừng gửi.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Chỉ cần gọi nó trên phương thức trình.

CHỈ ĐĂNG KÝ BLOCK nhưng không phải chức năng quan trọng khác của phím enter, chẳng hạn như tạo một đoạn mới trong <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Đây là cách hoàn hảo, Bạn sẽ không được chuyển hướng từ trang của bạn

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Tôi gặp một vấn đề tương tự, ở đó tôi có một lưới với "trường văn bản ajax" (Yii CGridView) và chỉ một nút gửi. Mỗi lần tôi thực hiện tìm kiếm trên một trường văn bản và nhấn vào biểu mẫu đã gửi. Tôi đã phải làm một cái gì đó với nút vì đó là nút chung duy nhất giữa các khung nhìn (mẫu MVC). Tất cả tôi phải làm là loại bỏ type="submit"và đặtonclick="document.forms[0].submit()

Tôi nghĩ rằng nó được bao phủ đầy đủ với tất cả các câu trả lời, nhưng nếu bạn đang sử dụng một nút có một số mã xác thực JavaScript, bạn chỉ có thể đặt onkeypress của biểu mẫu cho Enter để gọi trình của bạn như mong đợi:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

JS onkeypress có thể là bất cứ điều gì bạn cần làm. Không cần thay đổi toàn cầu lớn hơn. Điều này đặc biệt đúng nếu bạn không phải là người viết mã ứng dụng từ đầu và bạn đã được sửa chữa trang web của người khác mà không xé nó ra và kiểm tra lại.

Có nhiều câu trả lời hay ở đây rồi, tôi chỉ muốn đóng góp một cái gì đó từ góc độ UX. Điều khiển bàn phím trong các hình thức là rất quan trọng.

Câu hỏi là làm thế nào để vô hiệu hóa từ trình trên phím nhấn Enter. Không phải làm sao để bỏ quaEnter trong toàn bộ một ứng dụng. Vì vậy, hãy xem xét việc gắn trình xử lý vào một phần tử biểu mẫu, không phải cửa sổ.

Vô hiệu hóa Enterđể gửi biểu mẫu vẫn nên cho phép như sau:

1. Gửi mẫu qua EnterGửi khi nút gửi được tập trung.
2. Gửi biểu mẫu khi tất cả các lĩnh vực được điền.
3. Tương tác với các nút không gửi qua Enter.

Đây chỉ là nồi hơi nhưng nó tuân theo cả ba điều kiện.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Một cái gì đó tôi chưa thấy đã trả lời ở đây: khi bạn duyệt qua các yếu tố trên trang, nhấn Enterkhi bạn nhận được nút gửi sẽ kích hoạt trình xử lý onsubmit trên biểu mẫu, nhưng nó sẽ ghi lại sự kiện dưới dạng MouseEvent. Đây là giải pháp ngắn của tôi để bao quát hầu hết các cơ sở:

Đây không phải là câu trả lời liên quan đến jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Để tìm một ví dụ hoạt động: https://jsfiddle.net/nemearial/6rooseva2/

Trong trường hợp cụ thể của tôi, tôi đã phải dừng ENTER gửi biểu mẫu và cũng mô phỏng việc nhấp vào nút gửi. Điều này là do nút gửi có trình xử lý nhấp chuột vào nó vì chúng tôi đã ở trong một cửa sổ phương thức (mã cũ được kế thừa). Trong mọi trường hợp đây là giải pháp kết hợp của tôi cho trường hợp này.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Ca sử dụng này đặc biệt hữu ích cho những người làm việc với IE8.

Điều này làm việc cho tôi

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Tôi muốn thêm một ít mã CoffeeScript (không được kiểm tra trường):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Tôi hy vọng bạn thích thủ thuật hay trong mệnh đề trừ khi.)

Sử dụng Javascript (không kiểm tra bất kỳ trường đầu vào nào):

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

Nếu ai đó muốn áp dụng điều này trên các trường cụ thể, ví dụ văn bản loại đầu vào:

<script>
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 hoạt động tốt trong trường hợp của tôi.

Đi vào css của bạn và thêm nó vào đó sau đó sẽ tự động chặn việc gửi biểu mẫu của bạn miễn là bạn đã gửi đầu vào nếu bạn không còn muốn nữa, bạn có thể xóa nó hoặc gõ activatevà deactivatethay vào đó

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Bạn cũng có thể sử dụng javascript:void(0)để ngăn chặn việc gửi biểu mẫu.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Điều này đã làm việc cho tôi trong tất cả các trình duyệt sau nhiều thất vọng với các giải pháp khác. Hàm bên ngoài name_space chỉ là để tránh khai báo toàn cầu, một cái gì đó tôi cũng khuyên bạn nên.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Sử dụng mẫu:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Sử dụng:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>