input的粘贴事件

向右看齐 2023-02-14 10:54 18阅读 0赞

直接操作DOM的话比较简单，还有一种特殊情况：shadow dom的粘贴事件  
就需要先拿到真实DOM: 使用定时器setTimeout()去获取就可以了

input.addEventListener('paste', event => { 
      event.preventDefault();
      let pasteValue=(event.clipboardData || window.clipboardData).getData('text');
      
      document.execCommand('insertText', false, pasteValue);//火狐浏览器
      // document.getSelection().createRange().pasteHTML(pasteValue);//谷歌浏览器
      // window.getSelection().getRangeAt(0).insertNode(pasteValue);//火狐浏览器
    
    });

除了上面的光标插入文本，还有另外一种方法，就是直接修改input的值（e.target.value）  
注意：粘贴过程中可能会有覆盖粘贴，可以使用selection去处理，我这里使用的是input光标位置来获取被覆盖的内容

//第一种
    const selection = window.getSelection();
        if (!selection.rangeCount) return false;
        selection.deleteFromDocument();
        selection.getRangeAt(0).insertNode(document.createTextNode(paste));

//第二种
    inputValue = e.target.value;//获取input值，用来处理覆盖粘贴
    e.target.value = 
                inputValue.slice(0,input.selectionStart) +
                pasteValue +
                inputValue.slice(input.selectionEnd, inputValue.length);

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 input的粘贴事件

直接操作DOM的话比较简单，还有一种特殊情况：shadow dom的粘贴事件就需要先拿到真实DOM: 使用定时器setTimeout()去获取就可以了 inpu

向右看齐/ 2023年02月14日 10:54/ 0 赞/ 19 阅读

相关 input事件和change事件的区别

input事件：在输入框输入的时候会实时响应并触发； change事件：在输入框失去焦点，并且输入框的值发生变化的时候才会触发，和 blur事件略有不同，blur事件是每次

旧城等待，/ 2022年12月17日 07:21/ 0 赞/ 322 阅读

相关 element 阻止input的enter事件

1、element 中 <el-form :inline="true" :disabled="disabled" @submit.native.prevent>

古城微笑少年丶/ 2022年09月08日 03:40/ 0 赞/ 267 阅读

相关【jquery】input 和 blur 事件

实现功能为：Dom 加载完之后，给input输入框绑定 input(输入变化) 和 blur(失去焦点) 事件，代码如下（错误）： $("newname").on("

迷南。/ 2022年08月09日 14:58/ 0 赞/ 576 阅读

相关监测input file的事件

今天要写个监听input file是否选中文件的事件，之前写过监测input值的变化事件，如下： $("input").bind('input porpertycha

╰半橙微兮°/ 2022年06月17日 03:13/ 0 赞/ 327 阅读

相关 input 标签的监听事件总结

问题：用户选择粘贴复制的话，keyup事件不能触发，也就不能通过判断input内容来改变提交按钮的状态 1.onfocus 当input 获取到焦点时触发 2.onblu

傷城~/ 2022年06月09日 05:56/ 0 赞/ 469 阅读

相关说说 input 输入框的事件

1、从input框获取焦点到，输入值，失去焦点这个过程所有事件，以及一些特点；过程：onfocus -> 键盘输入 -> onkeydown -> onkeypress -

亦凉/ 2022年04月23日 06:30/ 0 赞/ 634 阅读

相关 vue + iview 中 Input 与 input 的 change 事件区别

转自： https://blog.csdn.net/yiifaa/article/details/52452153 1、vue + input <label>i

清疚/ 2022年03月06日 19:30/ 0 赞/ 996 阅读

相关 IOS 手机中 input 框中粘贴复制触发不了 Keyup 事件

在 IOS 手机中 input 框中粘贴复制触发不了 Keyup 事件：解决方法： 1.改为 change 事件 2. 改为 input 事件公众号：Coder

末蓝、/ 2021年08月31日 00:10/ 0 赞/ 712 阅读

相关 JavaScript input 事件

JavaScript input 事件 input 事件会在 `<input>`、`<select>` 和 `<textarea>` 等元素的值发生改变时触发。此事件会...

小灰灰/ 2020年06月02日 14:14/ 0 赞/ 806 阅读