HOME › học javascript - lập trình javascript cơ bản>>15. sự kiện trong javascript

Sự kiện keypress trong JavaScript (khi nhấn và nhả phím không phải phím bổ trợ)

25 tháng 6 ,2022

Cùng tìm hiểu về sự kiện keypress trong JavaScript. Bạn sẽ biết trong JavaScript sự kiện keypress xảy ra khi nào, cách bắt sự kiện keypress cũng như ứng dụng keypress để bắt sự kiện bàn phím trong trong JavaScript sau bài học này.

Có 3 phương pháp bắt sự kiện keypress trong JavaScript như sau:

Sử dụng thuộc tính onkeypress để đăng ký trực tiếp trình xử lý sự kiện keypress vào Element
Sử dụng thuộc tính onkeypress để đăng ký trình xử lý sự kiện keypress vào Element thu được từ DOM
Sử dụng phương thức addEventListener

Sự kiện keypress trong JavaScript là gì

Sự kiện keypress trong JavaScript xảy ra sau khi người dùng nhấn một phím không phải phím bổ trợ trên bàn phím. Sự kiện này xảy ra ngay khi nhấn phím, và không liên quan đến việc phím đó được giữ, hay là được nhả sau đó. Và sự kiện này phát sinh trên các Element Object trong JavaScript.

Ở đây phím bổ trợ là các phím như là Shift hoặc Ctrl. Do keypress không hỗ trợ lấy sự kiện phát sinh trên các phím bổ trợ này, nên để có thể lấy sự kiện phát sinh khi nhấn chúng, hãy sử dụng sự kiện có tác dụng gần như tương tự với keypress là sự kiện keyup và keydown để thay thế.

Xem thêm: Sự kiện keyup và keydown trong JavaScript

Tên sự kiện: keypress
Loại sự kiện: KeyboardEvent
Khả năng Bubbling: Có
Khả năng Cancel: Có

Sự kiện keypress rất giống với sự kiện keyup và keydown trong JavaScript. Trong phần lớn các trường hợp thì 2 sự kiện này đều đưa ra kết quả giống nhau. Điểm khác biệt giữa chúng là khác với keyup và keydown có thể sử dụng cho tất caả các phím, thì sự kiện keypress lại không dùng được cho các phím bổ trợ này.

Lại nữa, theo tài liệu developer.mozilla.org thì do sự kiện keypress phụ thuộc nhiều vào máy thiết bị người dùng, nên hiện này nó không còn được khuyến khích sử dụng.

Bắt sự kiện keypress trong JavaScript

Để bắt sự kiện keypress trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện keypress xảy ra, và phải đăng ký trình xử lý sự kiện này vào Element cần quan sát.

Tuỳ vào cách đăng ký trình xử lý sự kiện mà chúng ta có 3 phương pháp bắt sự kiện keypress trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính onkeypress để đăng ký trực tiếp trình xử lý sự kiện vào Element

Chúng ta có thể sử dụng thuộc tính onkeypress của Element để bắt sự kiện keypress, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho giá trị thuộc tính onkeypress của Element.

Ví dụ cụ thể:

<textarea id="memo" onkeypress="keyPress()" ></textarea>

<script>
function keyPress(){
    console.log('keypress');
}
</script>

Trong ví dụ này, trình xử lý sự kiện keyPress được đăng ký cho thuộc tính onkeypress của Element có d="memo", nên khi sự kiện keypress xảy ra đối với Element này, trình xử lý sự kiện sẽ bắt và xử lý nó.

Phương pháp 2: Sử dụng thuộc tính onkeypress để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Cũng với phương pháp dùng thuộc tính onkeypress để đăng ký trình xử lý sự kiện, tuy nhiên lần này chúng ta không đăng ký trực tiếp thuộc tính của Element, mà bằng cách sử dụng DOM để lấy Element rồi mới đăng ký.

Ví dụ cụ thể:

```html
<textarea id="memo"></textarea>

<script>
function keyPress(){
    console.log('keyPress');
}

function keyUp(){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.onkeypress = keyPress;
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="memo" từ DOM. Sau đó mới dùng thuộc tính onkeypress của Element đó để đăng ký trình xử lý sự kiện keyPress giúp bắt sự kiện keypress khi nó xảy ra.

Xem thêm: getElementById trong JavaScript

Phương pháp 3: Sử dụng phương thức addEventListener

Với phương pháp này, chúng ta cũng dùng DOM để lấy Element cần đăng ký trình xử lý sự kiện. Sau đó khai báo tên sự kiện cũng như tên trình xử lý sự kiện vào Element bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<textarea id="memo"></textarea>

<script>
function keyPress(){
    console.log('keyPress');
}

let textarea = document.getElementById('memo');
textarea.addEventListener('onkeypress', keyPress);
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="memo" từ DOM. Sau đó dùng phương thức addEventListener của Element đó để đăng ký trình xử lý sự kiện keyPress tương ứng với tên sự kiên onkeypress nhằm giúp bắt các sự kiện khi nó xảy ra.

Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với sự kiện keypress, một KeyboardEvent Object kế thừa từ Event Object sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng KeyboardEvent này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng KeyboardEvent được trả về này.

<textarea id="memo"></textarea>

<script>
function keyPress(event){
    console.log(event);
}

let textarea = document.getElementById('memo');
textarea.addEventListener('onkeypress', keyPress);
</script>

Bắt sự kiện bàn phím trong trong JavaScript bằng keypress

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách sử dụng keypress để bắt sự kiện bàn phím trong trong JavaScript. Trong ví dụ này chúng ta sử dụng tới phương pháp 3: Sử dụng phương thức addEventListener để bắt sự kiện. Các phương pháp khác cũng tiến hành tương tự.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#memo{
width:300px;
height:100px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>Kiểm tra phím được nhấn</p>

<textarea id="memo"></textarea>

<script>
function keyPress(event){
    console.log('keyPress:' + event.key);
}

let textarea = document.getElementById('memo');
textarea.addEventListener('onkeypress', keyPress);
</script>

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra một vùng nhập dữ liệu với thẻ textarea, và quan sát tên phím trên bàn phím được nhấn từ người dùng.

Khi nhấn một phím đơn, ví dụ các phím chữ như a, b, các phím như Enter hay phím cách Space từ bàn phím, các phím này sẽ được xác định và in ra màn hình như sau:

Tuy nhiên khi nhấn một tổ hợp chứa các phím hỗ trợ, ví dụ phím Shift + a để tạo chữ A hoa từ bàn phím, hoặc là nhấn một lần các phím hỗ trợ, thì các phím hỗ trợ này không được xác định bởi sự kiện keypress.

Sự khác biệt giữa sự kiện sự kiện keypress và keyup, keydown

Cả 3 sự kiện keyup, keydown và sự kiện keypress đều xảy ra trong quá trình chúng ta nhấp và thả phím. Tuy nhiên khác với keyup, keydown có thể dùng cho tất cả các phím trên bàn phím, thì sự kiện keypress chỉ có thể dùng cho các phím ký tự, chứ không dùng được cho các phím bổ trợ, ví dụ như phím Shift hoặc Ctrl chẳng hạn.

Ngoài sự khác biệt trên thì cách sử dụng keyup và keydown cũng tương tự như keypress, với cách sử dụng các thuộc tính onkeydown và onkeyup, hoặc là dùng phương thức addEventListener.

Ví dụ:

<textarea id="memo"></textarea>

<script>
function keyDown(){
    console.log('KeyDown');
}

function keyUp(){
    console.log('KeyUp');
}

let textarea = document.getElementById('memo');
textarea.onkeydown = keyDown;
textarea.onkeyup = keyUp;
</script>

Tuy nhiên thì theo một số nguồn tin thì hiện tại sự kiện keypress hiện đã không còn được khuyến khích sử dụng nữa, nên mặc dù có thể sử dụng keypress nhưng chúng ta nên dùng thay thế bằng sự kiện keyup và keydown mà Kiyoshi đã hướng dẫn trong bài sự kiện keyup và keydown trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện keypress trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.