Sự kiện nào <input type = “number” /> kích hoạt khi giá trị của nó bị thay đổi?


94

Chỉ tự hỏi liệu có ai biết sự kiện nào mà một <input type="number" />phần tử HTML5 kích hoạt khi các mũi tên lên / xuống của nó được nhấp vào hay không:

đầu vào số mẫu

Tôi đã sử dụng dấu onblurcho khi tiêu điểm rời khỏi trường nhập.


Đây có vẻ là một lỗi của chrome stackoverflow.com/questions/44978087/...
Oriol Jiménez

Câu trả lời:


73

change sẽ là sự kiện được kích hoạt khi giá trị của trường thay đổi.

Tôi nghĩ rằng sự kiện HTML5 inputcũng sẽ kích hoạt.


36
chỉ oninputđược kích hoạt khi nhấp vào mũi tên 'lên' và 'xuống'.
N 1.1

2
nhưng onchange chỉ kích hoạt khi mờ, ít nhất trong firefox. Tôi đoán chúng ta sẽ phải tìm phím bấm.
andho

onchange và oninput cả làm việc trong Opera, nhưng chỉ oninput sẽ làm việc trong Chrome (và chỉ sau đó khi tôi trở về sai từ sự kiện-xử lý - nếu Chrome liên tục sẽ bắn oninput sự kiện)
Ian Oxley

2
changekhông kích hoạt khi giá trị được nhập vào, chỉ khi các nút được nhấp (ít nhất là trên Firefox).
Timmmm

5
inputgiống như một phản ứng tổng hợp giữakeyup change
Thành Trung

37

Tôi thấy rằng đối với jQuery, đầu vào bàn phím có mã sau đây, thay đổi con lăn chuột và nhấp vào nút trong Chrome và cũng xử lý nhập bàn phím trong Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});

2
Thêm 'thay đổi' vào đó nữa và nó hoàn hảo. Bạn sẽ vẫn muốn lắng nghe những thay đổi bên ngoài đối với nó và dù sao thì việc thêm nó cũng không có hại gì.
Matt Fletcher

Và cả 'mousewheel' nếu bạn muốn xem các sự kiện cuộn bên trong trường nhập liệu.
Matt Fletcher

4
Lưu ý rằng .bind()hiện không được dùng nữa để ủng hộ.on()
Michael Hays

7

Tôi đã tìm thấy điều đó onkeyuponchangebao gồm mọi thứ trong Chrome 19. Điều này xử lý đầu vào giá trị trực tiếp, nhấn phím mũi tên lên, nhấp vào các nút và cuộn con lăn chuột.

onchangeChỉ riêng trong Chrome là đủ, nhưng các trình duyệt khác chỉ hiển thị trường dưới dạng hộp văn bản cần onkeyupliên kết, hoạt động hoàn hảo để đọc giá trị mới.

Ràng buộc mousewheelsự kiện riêng lẻ ít thành công hơn. Sự kiện đã kích hoạt quá sớm - trước khi giá trị trường được cập nhật - và do đó luôn cung cấp giá trị trước đó của trường


Điều này cũng đúng với Firefox.
barfuin

5

Sự onchangekiện kích hoạt khi bị mờ nhưng oninputsự kiện sẽ kích hoạt khi bạn nhập. Có thể bạn muốn đặt bộ đếm thời gian cho oninputsự kiện và kích hoạt onchangesự kiện của mình khi người dùng ngừng nhập trong một giây?


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.