1. Copy nội dung vào clipboard
Cho phép người dùng sao chép nhanh nội dung như mã giảm giá, link chia sẻ, hoặc bất kỳ đoạn văn bản nào.
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
console.log('Đã sao chép!');
});
}Có thể gắn vào nút:
<button onclick="copyToClipboard('https://example.com')">Copy Link</button>2. Cuộn về đầu trang
Tính năng thường gặp ở footer hoặc nút “Lên đầu”.
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}Thêm nút:
<button onclick="scrollToTop()">Lên đầu</button>3. Kiểm tra thiết bị có cảm ứng không
Hữu ích khi muốn thay đổi UI cho thiết bị cảm ứng (ẩn hover, bật tap-to-open,…).
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
Có thể dùng để thêm class vào <body>:
if (isTouchDevice) {
document.body.classList.add('touch');
}4. Chống spam sự kiện bằng debounce
Giảm số lần gọi hàm khi người dùng cuộn, resize hoặc nhập liệu liên tục.
function debounce(fn, delay = 300) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn.apply(this, args), delay);
};
}Ví dụ dùng cho ô tìm kiếm:
document.querySelector('#search').addEventListener('input', debounce((e) => {
console.log('Tìm:', e.target.value);
}, 500));5. Bật tắt dark mode bằng JavaScript
Chỉ cần một dòng, người dùng có thể chuyển qua giao diện tối dễ dàng.
document.body.classList.toggle('dark-mode');Kết hợp với nút:
<button onclick="document.body.classList.toggle('dark-mode')">Dark Mode</button>Kết luận
Những đoạn mã trên tuy đơn giản nhưng mang lại trải nghiệm mượt mà, trực quan và quen thuộc với người dùng hiện đại. Quan trọng hơn, chúng không yêu cầu thư viện ngoài, dễ nhúng vào mọi dự án, từ landing page đến blog cá nhân. Nếu đang xây dựng một website, hãy cân nhắc áp dụng những snippet nhỏ mà hữu ích này.
Bình luận