Trong các trường hợp như xác thực và xác minh dữ liệu, kiểu dáng của các thành phần trường sẽ được thay đổi bất cứ khi nào người dùng nhấn một phím khỏi bàn phím. Việc thay đổi kiểu dáng này liên quan đến mỗi lần nhấn hoặc nhả phím được thực hiện thông qua các trình xử lý sự kiện do jQuery cung cấp. Cụ thể, trình xử lý sự kiện hoặc phương thức xử lý hoặc gọi hàm khi bất kỳ phím nào được nhấn được giải phóng là “ gõ phím ()' phương pháp.
Mặt khác, phương thức xử lý hoặc gọi phím chức năng được nhấn là “ nhấn phím ()” và bạn có thể kiểm tra liên kết của chúng tôi bài báo cho sự kiện này.
Trong blog này, chúng tôi sẽ cung cấp mô tả ngắn gọn về phương thức keyup() của jQuery.
Làm cách nào để sử dụng phương thức keyup() của jQuery?
jQuery “ gõ phím ()” sẽ kích hoạt chức năng ẩn danh bất cứ khi nào người dùng ngừng nhấn hoặc nhập các phím bên trong trường đã chọn. Phương pháp này cũng được sử dụng để áp dụng kiểu động cho phần tử đã chọn trong thời gian thực.
Cú pháp
Cú pháp được sử dụng cho phương thức keyup() jQuery như sau:
$ ( 'cái này' ) . gõ phím ( tùy chỉnhFunc )
Trong cú pháp trên, “ cái này ” là phần tử HTML được chọn và “ tùy chỉnhFunc ” là một hàm được thực thi bởi “ gõ phím ” phương pháp trên “ cái này ”.
Hãy lấy một vài ví dụ để hiểu sâu hơn.
Ví dụ 1: Thay đổi màu văn bản bằng phương thức “keyup()”
Trong trường hợp này, màu của văn bản đã nhập sẽ bị đổi sang màu khác khi người dùng nhả phím đã nhấn như hình dưới đây:
< html >
< cái đầu >
< kịch bản src = 'https://code.jquery.com/jquery-3.7.0.js' >< / kịch bản >
< kịch bản >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / kịch bản >
< / cái đầu >
< thân hình >
< div >
Nhập dữ liệu Linuxhint: < đầu vào nhận dạng = 'thử nghiệm' kiểu = 'chữ' / >
< / div >
< / thân hình >
< / html >
Mô tả của đoạn mã trên được đề cập dưới đây:
- Đầu tiên, nhập jQuery vào dự án bằng cách chèn CDN trực tuyến của nó bằng cách truy cập vào đây liên kết của tài liệu chính thức.
- Tiếp theo, tạo một hàm ẩn danh sẽ được gọi khi “ tài liệu ” hoặc trang được tải. Hàm này chọn phần tử HTML có id là “demo” và đính kèm “ gõ phím ()” với nó.
- Các ' gõ phím ()” gọi hàm gọi lại sử dụng “ css ()” để đặt màu phông chữ của văn bản thành “ rừng xanh ”.
- Bây giờ, hãy tạo “< đầu vào >” phần tử bên trong “< thân hình >” gắn thẻ và gán cho nó id là “ thử nghiệm ”.
Xem trước trang web sau khi hoàn tất quá trình biên dịch:
Đầu ra hiển thị màu của văn bản thay đổi khi phím đã chọn được nhả ra.
Ví dụ 2: Thay đổi màu nền động
Trong ví dụ này, các màu nền khác nhau sẽ được đặt cho phần tử HTML đã chọn bất cứ khi nào người dùng rời khỏi phím được nhấn. Chúng ta hãy xem qua mã cho kịch bản này:
< cái đầu >< kịch bản src = 'https://code.jquery.com/jquery-3.7.0.js' >< / kịch bản >
< kịch bản >
hãy để nềnShades = [ 'ngọc lam' , 'màu cam' , 'xanh chói' , 'rừng xanh' ,
'xám nhạt' , 'màu nâu cát' , 'đỏ tươi' , 'gỗ lớn' ] ;
hãy để j = 0 ;
$ ( tài liệu ) .keyup ( chức năng ( sự kiện ) {
$ ( '#hgg' ) .css ( 'màu nền' , nềnSắc thái [ j ] ) ;
j++;
j = j % 9 ;
} ) ;
< / kịch bản >
< / cái đầu >
< thân hình >
< h1 phong cách = 'màu sắc: xanh nước biển' >Bài viết Linuxhint< / h1 >< anh >
< div nhận dạng = 'hgg' phong cách = 'phần đệm: 10px' >
< h2 >Khóa jQuery được sử dụng để đặt khác biệt Lý lịch mỗi khi Key được phát hành.< / h2 >
< anh / >
< / div >
< / thân hình >
Mô tả đoạn mã trên:
- Ban đầu, hãy nhập jQuery vào dự án của bạn bằng cách thêm jQuery CDN bên trong “< cái đầu > thẻ.
- Sau đó, tạo một mảng có tên “ nềnSắc thái ” chứa tám màu ngẫu nhiên.
- Tiếp theo, “ gõ phím ()” được gắn vào phương thức “ tài liệu ” và nó gọi một hàm gọi lại ẩn danh. Hàm này chọn phần tử HTML có id là “ hgg ” và áp dụng CSS “ màu nền ' tài sản.
- Mảng “ nềnSắc thái ” được chuyển làm giá trị cho thuộc tính CSS và chỉ mục được đặt thành “ j ' Biến đổi. Biến này được tăng lên một đơn vị mỗi lần và khởi động lại từ “ 0 ” chỉ số khi giá trị đạt “ số 8 ”. Bởi vì chỉ mục tối đa trong mảng là “ 7 ”.
- Sau đó, tạo một lựa chọn “ div ” phần tử có id là “ hgg ”, màu nền của phần tử này sẽ được thay đổi khi nhả phím được nhấn.
Xem trước trang web sau khi biên dịch:
Đầu ra xác nhận màu nền cho phần tử HTML đã chọn đang thay đổi mỗi khi phím được nhấn hoặc phím được chọn được thả ra. Đó là tất cả về việc sử dụng “ gõ phím ()' phương pháp.
Phần kết luận
jQuery “ gõ phím ()” sẽ kích hoạt chức năng gọi lại trên phần tử HTML đã chọn khi phím được nhả. Phương thức này không gọi khi phím được nhấn nhưng tại thời điểm nhả hoặc bật phím, chức năng này sẽ thực thi chức năng gọi lại. Blog này đã giải thích cách sử dụng và hoạt động của phương thức keyup() của jQuery.