Nhập nút kích hoạt

Tôi có một trang với hai nút. Một là một <button>yếu tố và một là một <input type="submit">. Các nút xuất hiện trên trang theo thứ tự đó. Nếu tôi ở trong trường văn bản ở bất kỳ đâu trong biểu mẫu và nhấn <Enter>, clicksự kiện của phần tử nút được kích hoạt. Tôi cho rằng đó là vì phần tử nút nằm trước.

Tôi không thể tìm thấy bất cứ thứ gì trông giống như một cách đáng tin cậy để đặt nút mặc định, tôi cũng không nhất thiết muốn vào thời điểm này. Trong trường hợp không có gì tốt hơn, tôi đã bắt được một phím bấm ở bất cứ đâu trên biểu mẫu và, nếu đó là <Enter>phím được nhấn, tôi chỉ phủ nhận nó:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Theo như tôi có thể nói cho đến nay, nó dường như đang hoạt động, nhưng nó cảm thấy vô cùng ham hố.

Có ai biết một kỹ thuật phức tạp hơn để làm điều này?

Tương tự, có bất kỳ cạm bẫy nào đối với giải pháp này mà tôi không biết?

Cảm ơn.

Sử dụng

<button type="button">Whatever</button>

nên làm thủ thuật.

Lý do là bởi vì một nút bên trong một biểu mẫu có kiểu được đặt ngầm định submit. Như zzzzBoz nói, Spec nói rằng đầu tiên buttonhoặc inputvới type="submit"là những gì được kích hoạt trong tình huống này. Nếu bạn đặt cụ thể type="button", thì trình duyệt sẽ bị xóa khỏi xem xét.

Điều quan trọng là phải đọc các thông số kỹ thuật HTML để thực sự hiểu hành vi nào được mong đợi:

Thông số HTML5 nêu rõ những gì xảy ra trongimplicit submissions :

Nút mặc định của thành phần biểu mẫu là nút gửi đầu tiên theo thứ tự cây có chủ sở hữu biểu mẫu là thành phần biểu mẫu đó.

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 đó.

Điều này không được làm rõ trong thông số HTML4, tuy nhiên các trình duyệt đã triển khai những gì được mô tả trong thông số HTML5 (đó là lý do tại sao nó được bao gồm rõ ràng).

Chỉnh sửa để thêm:

Câu trả lời đơn giản nhất tôi có thể nghĩ đến là đặt nút gửi của bạn làm [type="submit"]mục đầu tiên trong biểu mẫu, thêm phần đệm vào cuối biểu mẫu bằng css và đặt hoàn toàn nút gửi ở phía dưới nơi bạn muốn.

Tôi không nghĩ bạn cần javascript hoặc CSS để sửa lỗi này.

Theo thông số kỹ thuật html 5 cho các nút, một nút không có thuộc tính loại được xử lý giống như nút có loại được đặt thành "gửi", tức là nút để gửi biểu mẫu có chứa. Đặt loại nút thành "nút" sẽ ngăn hành vi bạn nhìn thấy.

Tôi không chắc về hỗ trợ trình duyệt cho việc này, nhưng hành vi tương tự đã được chỉ định trong thông số html 4.01 cho các nút vì vậy tôi hy vọng nó khá tốt.

Bằng cách nhấn 'Enter' khi tập trung, <input type="text">bạn kích hoạt sự kiện 'click' trên phần tử được định vị đầu tiên: <button>hoặc <input type="submit">. Nếu bạn nhấn 'Enter' in <textarea>, bạn chỉ cần tạo một dòng văn bản mới.

Xem ví dụ ở đây .

Mã của bạn ngăn không cho tạo một dòng văn bản mới <textarea>, vì vậy bạn phải bắt phím chỉ cho <input type="text">.

Nhưng tại sao bạn cần nhấn Entertrong trường văn bản? Nếu bạn muốn gửi biểu mẫu bằng cách nhấn 'Enter', nhưng <button>phải giữ vị trí đầu tiên trong bố cục, chỉ cần chơi với đánh dấu: đặt <input type="submit">mã trước <button>và sử dụng CSS để lưu bố cục bạn cần.

Bắt 'Enter' và lưu đánh dấu:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

Bất cứ khi nào bạn sử dụng một <button>yếu tố theo mặc định, nó sẽ xem xét nút type="submit"đó vì vậy nếu bạn xác định nút type="button"đó thì nó sẽ không coi đó <button>là nút gửi.

Theo mặc định, nhấn enter trong trường văn bản của biểu mẫu sẽ gửi biểu mẫu. Nếu bạn không muốn nó hoạt động theo cách bạn phải nắm bắt phím nhấn và sử dụng nó như bạn đã làm. Không có cách nào xung quanh điều này. Nó sẽ hoạt động theo cách này ngay cả khi không có nút nào trong biểu mẫu.

Bạn có thể sử dụng javascript để chặn gửi biểu mẫu cho đến thời điểm thích hợp. Một ví dụ rất thô thiển:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Nhấn enter vẫn sẽ kích hoạt biểu mẫu để gửi, nhưng javascript sẽ giữ cho nó không thực sự gửi, cho đến khi bạn thực sự nhấn nút.

Ví dụ

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

nếu bạn không sử dụng ngăn chặnDefault (), các nút khác sẽ được kích hoạt.

Tôi sẽ làm như sau: Trong trình xử lý cho sự kiện onclick của nút (không gửi) kiểm tra mã khóa của đối tượng sự kiện. Nếu nó là "enter", tôi sẽ trả về false.

Tình huống của tôi có hai Submitnút trong phần tử biểu mẫu: Updatevà Delete. Các Deletenút xóa một hình ảnh và các Updatenút cập nhật cơ sở dữ liệu với các trường văn bản trong biểu mẫu.

Bởi vì Deletenút đầu tiên ở dạng, nó là nút mặc định trên Enterphím. Không phải những gì tôi muốn. Người dùng sẽ có thể đánh Entersau khi thay đổi một số trường văn bản.

Tôi tìm thấy câu trả lời của mình để đặt nút mặc định ở đây :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Không sử dụng bất kỳ tập lệnh nào, tôi đã định nghĩa biểu mẫu mà mỗi nút thuộc về việc sử dụng <button> form="bla"thuộc tính. Tôi đặt Deletenút thành một biểu mẫu không tồn tại và đặt Updatenút tôi muốn kích hoạt trên Enterkhóa thành biểu mẫu mà người dùng sẽ ở khi nhập văn bản.

Đây là điều duy nhất đã làm việc cho tôi cho đến nay.

Bạn có thể làm một cái gì đó như thế này.

liên kết sự kiện của bạn vào một chức năng chung và gọi sự kiện bằng cách nhấn phím hoặc bấm nút.

ví dụ.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Tôi đã thêm một nút loại "gửi" làm thành phần đầu tiên của biểu mẫu và làm cho nó vô hình ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Hoạt động như làm mới trang web, tức là tôi không làm gì khi nhấn nút trừ khi trang web được tải lại. Đối với tôi hoạt động tốt ...