731

Tôi muốn phát hiện xem người dùng đã nhấn Enterbằng jQuery hay chưa.

Sao có thể như thế được? Nó có yêu cầu một plugin không?

EDIT: Có vẻ như tôi cần sử dụng keypress() phương pháp này.

Tôi muốn biết liệu có ai biết nếu có sự cố trình duyệt với lệnh đó không - như có bất kỳ vấn đề tương thích trình duyệt nào tôi nên biết không?

— chris
nguồn

liên kết về điều này .keypress () | Tài liệu API jQuery

— Haim Evgi

5

Một trong những điều tốt nhất trong các khung Javascript là theo mặc định chúng phải tương thích với nhiều trình duyệt. Họ xử lý các kiểm tra tương thích trình duyệt để người dùng không phải. Tôi chưa đọc mã nguồn JQuery nhưng tôi nghi ngờ chức năng nhấn phím là khác nhau theo nghĩa đó.

— miek

2

vấn đề tương thích trình duyệt duy nhất là bạn nên sử dụng e.which thay vì e.keyCode để phát hiện mã ascii.

— Daniel

1

stackoverflow.com/questions/302122/

— Mạnh

1330

Điểm chung của jQuery là bạn không phải lo lắng về sự khác biệt của trình duyệt. Tôi khá chắc chắn rằng bạn có thể an toàn enterkhi đạt 13 trên tất cả các trình duyệt. Vì vậy, với ý nghĩ đó, bạn có thể làm điều này:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

— Paolo Bergantino
nguồn

7

Tôi đang liên kết với điều này bởi vì tôi đã đọc nó và gãi đầu về lý do tại sao phím bấm không hoạt động với IE. (nó sẽ không liên kết với $(window)IE) quirksmode.org/dom/events/keys.html

— Ẩn danh

17

e.keyCode không phải là trình duyệt chéo 100%. sử dụng e.which thay vì như hiển thị bên dưới

— Daniel

15

Từ tài liệu jQuery "Thuộc tính event.which bình thường hóa event.keyCode và event.charCode. Nên xem event.which để nhập phím bàn phím."

— Riccardo Galli

20

$ (tài liệu) .on ('nhấn phím', hàm (e) {

— user956584

5

Tôi nhận được nhiều lần thực thi chức năng đã cho do lan truyền sự kiện (nghĩa là cảnh báo đang bị ném hai lần). Để ngăn chặn điều này, hãy thêm một e.stopPropagation () vào cuối hàm

— dpb

129

Tôi đã viết một plugin nhỏ để dễ dàng liên kết "nhấn phím enter" một sự kiện:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Sử dụng:

$("#input").enterKey(function () {
    alert('Enter!');
})

— Andrea
nguồn

Điều này không hiệu quả với tôi (tôi đã #inputở trên <input>sân)

— Rápli András

1

Nếu phần tử #input sẽ động thì sao?

— Jigar7521

@mplungjan không chắc ý của bạn là gì khi "ủy thác"

— Andrea

$("#input").on("someevent","someselector",function () {})

— mplungjan

62

Tôi không thể lấy mã được đăng bởi @Paolo Bergantino để hoạt động nhưng khi tôi đổi nó thành $(document)và e.whichthay vào e.keyCodeđó tôi thấy nó hoạt động không có lỗi.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Liên kết với ví dụ trên JS Bin

— Ian Roke
nguồn

Đối với tôi, những gì không hoạt động với IE. Nó làm việc cho người khác?

— Umesh Rajbhandari

Phiên bản nào của IE? Hoạt động tốt với tôi trên IE7.

— Ian Roke

Từ tài liệu jQuery "Thuộc tính event.which bình thường hóa event.keyCode và event.charCode. Nên xem event.which để nhập phím bàn phím."

— Riccardo Galli

52

Tôi thấy điều này tương thích với nhiều trình duyệt hơn:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

— jesal
nguồn

1

IF Ternary của bạn có thể được rút ngắn thành: var keycode = event.keyCode || sự kiện.những gì;

— súng lục-pete

29

Bạn có thể làm điều này bằng cách xử lý sự kiện 'keydown' của jquery

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

— Nasruddin
nguồn

11

Sử dụng `event.key`và hiện đại JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

hoặc không có jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Tài liệu Mozilla

Trình duyệt được hỗ trợ

— Giáp
nguồn

9

Tôi đã dành đôi khi đến với giải pháp này, tôi hy vọng nó sẽ giúp được ai đó.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

— Samuel Kwame Antwi
nguồn

8

Có một phương thức sự kiện keypress () . Số ascii của phím Enter là 13 và không phụ thuộc vào trình duyệt nào đang được sử dụng.

— Richard Simões
nguồn

7

Một phần mở rộng nhỏ của câu trả lời của Andrea ở trên làm cho phương thức trợ giúp trở nên hữu ích hơn khi bạn cũng có thể muốn chụp các lần nhấn enter đã sửa đổi (ví dụ: ctrl-enter hoặc shift-enter). Ví dụ: biến thể này cho phép ràng buộc như:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

để gửi biểu mẫu khi người dùng nhấn ctrl-enter, tập trung vào textarea của biểu mẫu đó.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(xem thêm Ctrl + Nhập jQuery trong TEXTAREA )

— tham gia
nguồn

4

Trong một số trường hợp, bạn có thể cần phải ENTERkhóa phím cho một khu vực nhất định của trang nhưng không phải cho các khu vực khác của trang, như trang bên dưới có chứa tiêu đề <div> với trường TÌM KIẾM .

Tôi đã mất một chút để tìm ra cách để làm điều này và tôi đang đăng ví dụ đơn giản nhưng đầy đủ này lên đây cho cộng đồng.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Liên kết với Sân chơi JSFiddle : [Submit]Nút không làm gì cả, nhưng nhấn ENTERtừ một trong các điều khiển Hộp văn bản sẽ không gửi biểu mẫu.

— mã jp2
nguồn

4

Hãy thử điều này để phát hiện phím Enter được nhấn.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

Xem bản demo @ phát hiện nhấn phím trên bàn phím

— jonathan klevin
nguồn

2

Vì keypresssự kiện không nằm trong bất kỳ đặc điểm kỹ thuật chính thức nào, hành vi thực tế gặp phải khi sử dụng nó có thể khác nhau giữa các trình duyệt, phiên bản trình duyệt và nền tảng.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Mở rộng đoạn trích

Tôi hy vọng nó sẽ hữu ích!

— Zoe_NS
nguồn

Lưu ý, lý do tại sao keypresskhông có trong spec (nữa) là vì nó không được dùng nữa ( MDN ).

— YellowAfterlife

vì vậy, tôi đã chỉnh sửa ... tnx <3

— Zoe_NS

0

Cách dễ dàng để phát hiện xem người dùng có nhấn enter hay không là sử dụng số khóa, số khóa nhập là = 13 để kiểm tra giá trị của khóa trong thiết bị của bạn

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

bằng cách nhấn phím enter, bạn sẽ nhận được kết quả là 13. sử dụng giá trị khóa bạn có thể gọi hàm hoặc làm bất cứ điều gì bạn muốn

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

nếu bạn muốn nhắm mục tiêu một nút khi nhấn phím enter, bạn có thể sử dụng mã

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Hy vọng nó sẽ giúp

— người dùng2216399
nguồn

0

Tôi nghĩ rằng phương pháp đơn giản nhất sẽ là sử dụng vanilla javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

— Duan Walker
nguồn

0

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

— Tayfun Açıkgöz
nguồn

3

Bạn có thể thêm một chút ý kiến giải thích để giải thích cho người hỏi về cách mã của bạn hoạt động - cảm ơn.

— SaschaM78

0

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

— AzizAhmad
nguồn

Điều này trông giống như một sự thích nghi của các câu trả lời khác - bạn có thể thêm một số lời giải thích để làm cho câu trả lời của bạn thú vị như những câu hỏi khác không?

— Nico Haase

0

Tôi đã sử dụng $(document).on("keydown").

Trên một số trình duyệt keyCodekhông được hỗ trợ. Tương tự whichnhư vậy nếu keyCodekhông được hỗ trợ, bạn cần sử dụng whichvà ngược lại.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Mở rộng đoạn trích

— Justin Lưu
nguồn

Làm cách nào để phát hiện nhấn Enter trên bàn phím bằng jQuery?

Sử dụng event.keyvà hiện đại JS!

Sử dụng `event.key`và hiện đại JS!