Giả sử ta có input có ô input như sau

<input type="number" class="input-text qty text" name="qty" value="9" min="1" max="9" step="1">

jQuery(document).ready(function($) {

    // Ngăn không cho nhập ký tự không hợp lệ
    $(document).on('keydown', '.qty', function(e) {
        const allowedKeys = [8, 9, 27, 13, 46, 37, 38, 39, 40]; // Backspace, Tab, Escape, Enter, Delete, Arrow keys

        // Nếu nhấn tổ hợp phím Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X thì cho phép
        if (
            (e.ctrlKey || e.metaKey) && 
            (e.key === 'a' || e.key === 'c' || e.key === 'v' || e.key === 'x')
        ) {
            return;
        }

        // Ngăn nhập ký tự không phải số
        if (
            !allowedKeys.includes(e.keyCode) && // Không phải phím đặc biệt
            (e.keyCode < 48 || e.keyCode > 57) && // Không phải số trên hàng phím thường
            (e.keyCode < 96 || e.keyCode > 105) // Không phải số trên Numpad
        ) {
            e.preventDefault();
        }
    });

    // Xử lý các trường hợp người dùng dán hoặc nhập ký tự không hợp lệ
    $(document).on('input', '.qty', function () {
        const $this = $(this);
        const value = $(this).val();

        // If the value is not a number, reset the value to 1
        if (!/^\d+$/.test(value) || value === '') {
            $this.val(1);
        }
    });
});

 

Bài viết liên quan

post-no-image

Trang website có nhiều hiệu ứng hay đẹp tham khảo

post-no-image

Chia nhỏ task cron tự động

post-no-image

Sửa lỗi phân trang khi custom query trong WP Query

post-no-image

Hàm preg_replace_callback() là gì? và ứng dụng trong WordPress

post-no-image

Hướng dẫn chuyển ảnh về định dạng Webp hay AVIF

post-no-image

Xử lý change status order Woocommerce khi refund từ Paypal