Tại Cafedev, chúng tôi luôn nỗ lực cung cấp kiến thức JavaScript từ cơ bản đến nâng cao. Trong bài viết này, chúng ta sẽ khám phá các sự kiện quan trọng liên quan đến thay đổi dữ liệu, bao gồm `change`, `input`, `cut`, `copy`, và `paste`. Những sự kiện này không chỉ giúp bạn quản lý dữ liệu đầu vào mà còn tối ưu hóa trải nghiệm người dùng. Hãy cùng tìm hiểu cách sử dụng và xử lý các sự kiện này để nâng cao kỹ năng lập trình JavaScript của bạn.
Hãy cùng tìm hiểu về các sự kiện liên quan đến việc cập nhật dữ liệu.
Nội dung chính
1. Sự kiện: change
Sự kiện change được kích hoạt khi phần tử đã hoàn tất việc thay đổi.
Đối với các trường văn bản, sự kiện này xảy ra khi phần tử mất focus.
Ví dụ, khi bạn đang gõ vào trường văn bản dưới đây – sẽ không có sự kiện nào xảy ra. Nhưng khi bạn chuyển focus sang nơi khác, ví dụ, nhấp vào một nút – sự kiện change sẽ xảy ra:
<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">Đối với các phần tử khác: select, input type=checkbox/radio sự kiện này xảy ra ngay sau khi thay đổi lựa chọn:
<select onchange="alert(this.value)">
<option value="">Select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>2. Sự kiện: input
Sự kiện input xảy ra mỗi khi giá trị được người dùng thay đổi.
Không giống như các sự kiện bàn phím, sự kiện này xảy ra khi bất kỳ thay đổi giá trị nào, kể cả những thay đổi không liên quan đến hành động bàn phím: dán bằng chuột hoặc sử dụng nhận diện giọng nói để nhập văn bản.
Ví dụ:
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>Nếu chúng ta muốn xử lý mọi thay đổi của một <input>, thì sự kiện này là lựa chọn tốt nhất.
Tuy nhiên, sự kiện input sẽ không kích hoạt khi có thao tác bàn phím hoặc hành động không làm thay đổi giá trị, ví dụ như nhấn phím mũi tên ⇦ ⇨ khi đang ở trong ô input.
Không thể ngăn chặn điều gì trong oninput
Sự kiện input xảy ra sau khi giá trị đã được thay đổi.
Vì vậy, chúng ta không thể sử dụng event.preventDefault() ở đây – vì nó đã quá muộn, không có hiệu quả gì.
3. Các sự kiện: cut, copy, paste
Những sự kiện này xảy ra khi cắt/sao chép/dán giá trị.
Chúng thuộc lớp ClipboardEvent và cung cấp quyền truy cập vào dữ liệu bị cắt/sao chép/dán.
Chúng ta cũng có thể sử dụng event.preventDefault() để hủy bỏ hành động, sau đó không có gì được sao chép/dán.
Ví dụ, đoạn mã dưới đây ngăn chặn tất cả các sự kiện cut/copy/paste và hiển thị văn bản mà chúng ta đang cố gắng cắt/sao chép/dán:
<input type="text" id="input">
<script>
input.onpaste = function(event) {
alert("paste: " + event.clipboardData.getData('text/plain'));
event.preventDefault();
};
input.oncut = input.oncopy = function(event) {
alert(event.type + '-' + document.getSelection());
event.preventDefault();
};
</script>Xin lưu ý: trong các trình xử lý sự kiện cut và copy, một cuộc gọi đến event.clipboardData.getData(...) sẽ trả về một chuỗi rỗng. Điều này là vì về mặt kỹ thuật, dữ liệu chưa có trong clipboard. Nếu chúng ta sử dụng event.preventDefault(), dữ liệu sẽ không được sao chép.
Vì vậy, ví dụ trên sử dụng document.getSelection() để lấy văn bản được chọn. Bạn có thể tìm thêm thông tin về việc chọn tài liệu trong bài viết .
Có thể sao chép/dán không chỉ văn bản, mà còn tất cả mọi thứ. Ví dụ, chúng ta có thể sao chép một tệp trong trình quản lý tệp của hệ điều hành và dán nó.
Điều này là vì clipboardData thực hiện giao diện DataTransfer, thường được sử dụng cho kéo và thả và sao chép/dán. Điều này hơi vượt quá phạm vi của chúng ta bây giờ, nhưng bạn có thể tìm thấy các phương thức của nó trong DataTransfer specification.
Ngoài ra, có một API bất đồng bộ bổ sung để truy cập clipboard: navigator.clipboard. Thông tin thêm về nó trong tài liệu Clipboard API and events, không được hỗ trợ bởi Firefox.
Các hạn chế về an toàn
Clipboard là một điều toàn cục ở cấp hệ điều hành. Người dùng có thể chuyển đổi giữa các ứng dụng khác nhau, sao chép/dán các thứ khác nhau, và một trang web trình duyệt không nên thấy tất cả những điều đó.
Vì vậy, hầu hết các trình duyệt chỉ cho phép truy cập đọc/ghi clipboard liền mạch trong phạm vi của các hành động người dùng cụ thể, chẳng hạn như sao chép/dán, v.v.
Cấm tạo các sự kiện clipboard “tùy chỉnh” bằng dispatchEvent trên tất cả các trình duyệt ngoại trừ Firefox. Và ngay cả khi chúng ta quản lý để kích hoạt sự kiện như vậy, tài liệu rõ ràng nêu rằng các sự kiện “nhân tạo” như vậy không được cung cấp quyền truy cập vào clipboard.
Ngay cả khi ai đó quyết định lưu event.clipboardData trong một trình xử lý sự kiện và sau đó truy cập nó sau – nó sẽ không hoạt động.
Để nhấn mạnh, event.clipboardData chỉ hoạt động trong bối cảnh của các trình xử lý sự kiện do người dùng khởi xướng.
Mặt khác, navigator.clipboard là API gần đây hơn, dành cho việc sử dụng trong bất kỳ bối cảnh nào. Nó yêu cầu sự cho phép của người dùng, nếu cần.
4. Tóm tắt
Các sự kiện thay đổi dữ liệu:
| Event | Description | Specials |
|---|---|---|
| change | A value was changed. | For text inputs, triggers when focus is lost. |
| input | Fires on every change for text inputs. | Triggers immediately, unlike the change event. |
| cut/copy/paste | Actions for cut, copy, and paste. | These actions can be prevented. Access clipboard data via event.clipboardData; in most browsers, navigator.clipboard is also supported (except in Firefox). |
Tại Cafedev, chúng tôi hy vọng bạn đã nắm rõ cách sử dụng các sự kiện `change`, `input`, `cut`, `copy`, và `paste` để quản lý dữ liệu và tương tác với người dùng hiệu quả hơn. Những kiến thức này sẽ giúp bạn xử lý các thay đổi dữ liệu và thao tác clipboard một cách linh hoạt. Đừng quên áp dụng những gì đã học vào dự án của bạn để nâng cao kỹ năng JavaScript và cải thiện trải nghiệm người dùng. Hãy tiếp tục theo dõi Cafedev để không bỏ lỡ những bài viết hữu ích khác!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Javascrypt chi tiết, dễ hiểu từ cơ bản tới nâng cao + Full Bài Tập thực hành nâng cao trình dev
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
