Hướng dẫn javascript detect paste in input - javascript phát hiện dán vào đầu vào

Tôi có một hộp đầu vào và tôi muốn sử dụng VBScript hoặc JavaScript [không có jQuery] để ghi lại sự kiện dán.

Ionică bizĂu

105K83 Huy hiệu vàng276 Huy hiệu bạc458 Huy hiệu Đồng83 gold badges276 silver badges458 bronze badges

Đã hỏi ngày 27 tháng 3 năm 2011 lúc 16:14Mar 27, 2011 at 16:14

Sử dụng sự kiện Onpaste để nắm bắt sự kiện và thực hiện những gì bạn cần trong JavaScript. Ví dụ. Để vô hiệu hóa dán trong trường văn bản đầu vào:

Đã trả lời ngày 27 tháng 3 năm 2011 lúc 16:20Mar 27, 2011 at 16:20

Philantphilantphilant

33,8K11 Huy hiệu vàng69 Huy hiệu bạc111 Huy hiệu đồng11 gold badges69 silver badges111 bronze badges

Đã trả lời ngày 27 tháng 3 năm 2011 lúc 16:23Mar 27, 2011 at 16:23

Jared Farrishjared FarrishJared Farrish

47.8K17 Huy hiệu vàng95 Huy hiệu bạc102 Huy hiệu đồng17 gold badges95 silver badges102 bronze badges

Chỉ dành cho độc giả trong tương lai tìm thấy điều này như tôi đã làm.

Bạn vẫn sẽ có thể thả văn bản vào một đầu vào với onpaste = "return false;" thuộc tính. Nếu bạn muốn tránh điều này, bạn có thể làm điều gì đó như thế này:

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

Đã trả lời ngày 26 tháng 7 năm 2018 lúc 12:45Jul 26, 2018 at 12:45

Sự kiện paste được bắn khi người dùng đã bắt đầu hành động "dán" thông qua giao diện người dùng của trình duyệt.paste event is fired when the user has initiated a "paste" action through the browser's user interface.

Nếu con trỏ nằm trong bối cảnh có thể chỉnh sửa [ví dụ, trong hoặc phần tử có thuộc tính contenteditable được đặt thành true] 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ỏ.

Một người xử lý cho sự kiện này có thể truy cập vào nội dung bảng tạm bằng cách gọi

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

0 trên thuộc tính

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

1 của sự kiện.

Để ghi đè hành vi mặc định [ví dụ: để chèn một số dữ liệu khác nhau hoặc chuyển đổi nội dung bảng tạm], một trình xử lý sự kiện phải hủy hành động mặc định bằng cách sử dụng

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

2, sau đó chèn dữ liệu mong muốn của nó theo cách thủ công.

Có thể xây dựng và gửi một sự kiện tổng hợp paste, nhưng điều này sẽ không ảnh hưởng đến nội dung của tài liệu.

Cú pháp

Sử dụng tên sự kiện trong các phương thức như

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

4 hoặc đặt thuộc tính Trình xử lý sự kiện.

addEventListener['paste', [event] => { }];

onpaste = [event] => { };

Loại sự kiện

Ví dụ

Ví dụ trực tiếp

HTML

Copy text from this box.
And paste it into this one.

div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}

JavaScript

const target = document.querySelector['div.target'];

target.addEventListener['paste', [event] => {
    event.preventDefault[];

    let paste = [event.clipboardData || window.clipboardData].getData['text'];
    paste = paste.toUpperCase[];
    const selection = window.getSelection[];
    if [!selection.rangeCount] return;
    selection.deleteFromDocument[];
    selection.getRangeAt[0].insertNode[document.createTextNode[paste]];
    selection.collapseToEnd[];
}];

Kết quả

Thông số kỹ thuật

Sự chỉ rõ

Api bảng clipboard và sự kiện # boardboard-event-paste
# clipboard-event-paste

HTML Standard # Handler-Onpaste
# handler-onpaste

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Các sự kiện liên quan:

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

Sự kiện này trên

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

7 Mục tiêu: paste

Sự kiện này trên các mục tiêu

var input_element = document.getElementById["Element"];
input_element.addEventListener["drop", function [event] {
    var types = event.dataTransfer.types;
    
    if [types.length > 2 || types.indexOf["text/plain"] === -1]
        event.preventDefault[];
    else {
      setTimeout[function [] { input_element.value = ""; }, 10];
    }
}, false];

9: paste