Xử lý người dùng nhấn phím 'Enter' trong trang web ASP.NET MVC

Question

Tôi đang làm việc trên trang web ASP.NET MVC có nhiều nút gửi. tức là

<input type="submit" name="SubmitButton" value="Reset" /> 
    <input type="submit" name="SubmitButton" value="OK" /> 
    <input type="submit" name="SubmitButton" value="Back" /> 

Tôi cần cho phép người dùng nhanh chóng gửi biểu mẫu bằng cách nhấn phím 'Enter'. Tiêu chuẩn HTML dường như chỉ định rằng nút gửi đầu tiên sẽ được giả định nếu người dùng nhấn phím 'Enter'. Tuy nhiên, tôi cần phải thực hiện nút thứ 2 (tức là nút "OK") nút mặc định và vì lý do tôi thậm chí không muốn nói, việc thay đổi thứ tự nút không phải là một tùy chọn.

Tôi googled xung quanh và tôi tìm thấy this post về cách sử dụng Page.Form.DefaultButton trong ASP.NET nhưng điều này không làm việc với ASP.NET MVC.

Tôi cũng đã cố gắng giải pháp javascript sau, trong khi nó hoạt động trong Chrome nhưng không hoạt động trong IE6

$('body').keypress(function(e) { 
     if (e.which === 13) { 
      $("input[value='OK']").trigger('click'); 
     } 
    }); 

tôi có thể nghĩ ra một số giải pháp thực sự khắc nghiệt như đi qua tất cả các điều khiển duy nhất trong hình thức một đính kèm các chức năng trên cho họ. Tuy nhiên, tôi không nghĩ rằng đó là một giải pháp rất gọn gàng nên tôi tự hỏi có ai có giải pháp tốt hơn không?

Answer 1

tắt Thứ nhất, đây là sai:

<input type="submit" name="SubmitButton" value="Reset" /> 
<input type="submit" name="SubmitButton" value="OK" /> 
<input type="submit" name="SubmitButton" value="Back" /> 

Cả ba trong số đó là nộp nút. Đặt lại là đầu vào của loại = "đặt lại". Nhận được sắp xếp. Thứ hai của tất cả, tôi đã thực hiện thành công một cái gì đó như thế, và nó hoạt động trên IE6. Hãy thử điều này:

function keypressHandler(e) 
    { 
     if(e.which == 13) { 
      e.preventDefault(); //stops default action: submitting form 
      $(this).blur(); 
      $('#SubmitButton').focus().click();//give your submit an ID 
     } 
    } 

    $('#myForm').keypress(keypressHandler); 

Phần tiêu điểm() làm cho nút này có vẻ được nhấn khi người dùng nhấn enter. Khá tiện lợi.

Answer 2

Thay đổi thứ tự nút trong nguồn nhưng không trực quan (ví dụ: sử dụng CSS để hoán đổi các nút)?

Answer 3

Bạn chỉ nên có một nút gửi. Nút reset nên type="reset" và nút quay lại có lẽ nên được type="button" như thế này:

<input type="reset" name="ResetButton" value="Reset" /> 
<input type="submit" name="SubmitButton" value="OK" /> 
<input type="button" name="BackButton" value="Back" /> 

Sau đó, Reset và OK sẽ chỉ làm việc theo cách mà họ có nghĩa vụ phải và bạn sẽ chỉ cần phải xử lý các nút Back nhấp chuột với Javascript.

Chỉnh sửa: Tùy chọn khác sẽ đặt các nút Đặt lại và gửi lại mỗi biểu mẫu trong biểu mẫu riêng của chúng bên trong iframe. Sau đó, họ sẽ bị bỏ qua bởi các hình thức chính và sẽ không được nút mặc định. Ngoài ra, điều này sẽ cho phép bạn trỏ chúng đến các hành động máy chủ khác nhau nếu cần thiết và sẽ không có bất kỳ sự phụ thuộc nào vào Javascript đối với các thao tác nút.

Answer 4

Sử dụng tính năng này.

$(function(){ 
    $('input').keydown(function(e){ 
     if (e.keyCode == 13) { 
      $("input[value='OK']").focus().click(); 
      return false; 
     } 
    }); 
}); 

Answer 5

Vì bạn sử dụng jquery, nếu bạn sử dụng hotkeys plugin, bạn có thể thực hiện một cách tiếp cận như vậy:

$(document).bind('keydown', 'return', function (evt){ 
    $.next("input[value='OK']").trigger("click"); 
    return false; 
}); 

Answer 6

chuẩn HTML dường như để xác định rằng vào nút đầu tiên gửi sẽ được giả định nếu một người dùng nhấn phím 'Enter' .

Không, việc sử dụng khóa nhập không được xác định, đó là phần mở rộng mở rộng được thêm vào theo các cách diễn giải khác nhau. Bạn sẽ nhận được các hành vi khác nhau trong các trình duyệt khác nhau (và nó có thể trở nên rất nguy hiểm khi bạn bắt đầu trộn lẫn trong các công ước văn hóa hoặc giao diện người dùng khác nhau về từ trái sang phải/phải để đặt hàng trái).

Nếu chỉ có 1 nút trên biểu mẫu thì tất cả các trình duyệt chính đều xảy ra theo cùng hành vi - chúng gửi biểu mẫu như khi nút đó được nhấn (nút buttonName = buttonValue được bao gồm trong dữ liệu biểu mẫu). Tất nhiên điều này không có nghĩa là các nút bấm onclick handler sẽ cháy - hành vi đó là trình duyệt cụ thể.

Khi có một số nút, đó là cảnh chụp hoàn hảo. Một số trình duyệt quyết định rằng nút đầu tiên (và định nghĩa đầu tiên có thể khác nhau - hầu hết sử dụng nút đầu tiên được đề cập trong cây Html, trong khi một số khác cố gắng sử dụng vị trí màn hình) được nhấp và sử dụng trong trình gửi, trong khi các trình duyệt khác (đáng chú ý là một số phiên bản của IE) đưa ra giả định chính xác như nhau rằng không có nút cụ thể được nhấn và do đó, không bao gồm buttonName = buttonValue (phần còn lại của biểu mẫu được gửi tốt).