paste

2023年09月12日

柏拉文

越努力，越幸运

一、认识

---

当用户通过浏览器的用户界面发起粘贴动作时，将触发 paste 事件。如果光标处于可编辑的上下文中（例如，在 <textarea> 或 contenteditable 属性设置为 true 的元素中），那么默认动作是将剪贴板的内容插入光标位置的文档中。

事件处理器可以通过调用事件 clipboardData 属性的 getData() 方法来访问剪贴板内容。要覆盖默认行为（例如插入一些不同的数据或转换剪贴板内容），事件处理程序必须使用 event.preventDefault() 取消默认动作，然后手动插入其想要的数据。

二、语法

---

addEventListener("paste", (event) => {});

onpaste = (event) => {};

三、场景

---

3.1 获取粘贴内容

附带格式样式

const target = document.querySelector("div.target");

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

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  console.log("paste",paste)
});

去除格式样式

const target = document.querySelector("div.target");

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

  let text;
  const clp = (event.originalEvent || event.clipboardData);

  if(clp == null){
    text = window.clipboardData.getData('text')||"";
    if(text!==""){
        if(window.getSelection){
            let newNode=document.createElement('span');
            newNode.getSelection().getRangeAt(0),insert(newNode);
        }else{
            document.selection.createRange().pasteHTML(text);
        }  
    }
  }else{
    text = clp.getData ('text/plain') || '';
    if(text!==''){
        document.execCommand('insertText', false , text);
    }
  }

  console.log("text",text)
});