Xử lý dữ liệu trong clipboard trước khi paste

Clipboard là gì

Clipboard là một vùng dữ liệu của máy tính có chức năng lưu giữ, ghi nhớ tạm thời các thông tin, hình ảnh đã được sao chép hoặc cắt ra từ một tài liệu nào đó mà chưa muốn thực hiện lệnh paste ngay. Chức năng ghi nhớ tạm thời này sẽ kết thúc ngay sau khi bạn thực hiện dán dữ liệu tại một nơi nào đó.

Đây được coi như là một phần của bộ nhớ RAM trong máy tính, ngoài ra, chúng còn được gọi với một cái tên khác đó là bộ nhớ đệm tạm thời để ghi nhớ lại các dữ liệu của người sử dụng. Người dùng có thể sao chép và cắt hình ảnh, tài liệu hay tập tin từ ứng dụng hay phần mềm này vào Clipboard. Để đưa các dữ liệu ấy vào Clipboard bạn có thể thực hiện thao tác Ctrl+C để copy dữ liệu và sau đó dùng Ctrl+V để thực hiện thao tác dán dữ liệu vào nơi phù hợp.

Paste event

Sự kiện paste được kích hoạt khi người dùng đã bắt đầu hành động paste thông qua giao diện người dùng của trình duyệt.

Nếu con trỏ ở trong ngữ cảnh có thể chỉnh sửa thì hành động mặc định là chèn nội dung của bảng tạm vào tài liệu ở vị trí con trỏ.

Trình xử lý cho sự kiện này có thể truy cập nội dung của bảng tạm bằng cách gọi getData () trên thuộc tính Clipboard của sự kiện.

Để ghi đè trình xử lý sự kiện phải hủy hành động mặc định bằng event.preventDefault (), sau đó chèn dữ liệu mong muốn theo cách thủ công.

Xử lý dữ liệu trong clipboard trước khi paste

Để xử lý dữ liệu trong clipboard trước khi paste, trước tiên cần ghi đè sự kiện

        const target = document.querySelector('input[name="target"]');

        target.addEventListener('paste', (event) => {
            event.preventDefault();
        });

Sau đó cần lấy giá trị trong clipboard và xử lý
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = handlePasteData();
    
    function handlePasteData() {
        paste = paste.trim();
        return paste;
    }

Xử lý dữ liệu được bôi đen (selection), thông thường các dữ liệu được bôi đen trước khi paste sẽ được xóa đi. Để xóa các dữ liệu bôi đen trong input cần phải lưu lại index của selectionStart và selectionEnd để xóa đoạn dữ liệu này trong ô input.

    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    let selectionStart =  $('input[name="target"]')[0].selectionStart;
    let selectionEnd = $('input[name="target"]')[0].selectionEnd;
    selection.deleteFromDocument();

Chèn dữ liệu paste sau khi được xử lý vào vị trí con trỏ trong ô input bằng cách cắt chuỗi currentValue (dữ liệu hiện tại của ô input) tại các vị trí selectionStart và selectionEnd và ghép lại bằng function join()

    setTimeout(() => {
              let currentValue = $('input[name="target"]').val();
              let output = [currentValue.slice(0, selectionStart), paste, currentValue.slice(selectionEnd)].join('');
              $('input[name="target"]').val(output);
     }, 50);

Hoàn tất

     function handlePasteData() {
        paste = paste.trim();
        return paste;
    }
    
    const target = document.querySelector('input[name="target"]');

        target.addEventListener('paste', (event) => {
            let paste = (event.clipboardData || window.clipboardData).getData('text');
            paste = handlePasteData();
        
            const selection = window.getSelection();
            if (!selection.rangeCount) return false;
            let selectionStart =  $('input[name="target"]')[0].selectionStart;
            let selectionEnd = $('input[name="target"]')[0].selectionEnd;
            selection.deleteFromDocument();
            setTimeout(() => {
              let currentValue = $('input[name="target"]').val();
              let output = [currentValue.slice(0, selectionStart), paste, currentValue.slice(selectionEnd)].join('');
              $('input[name="target"]').val(output);
            }, 50);
            event.preventDefault();
        });