剪切、复制、粘贴事件

news2024/9/20 14:31:09

剪切、复制、粘贴事件

  • oncopy 事件在用户拷贝元素上的内容时触发。
  • onbeforecut 事件在用户剪切文本,且文本还未删除时触发触发。
  • oncut 事件在用户剪切元素的内容时触发。
  • onbeforepaste 事件在用户向元素中粘贴文本之前触发。
  • onpaste 事件在用户向元素中粘贴文本时触发。

clipboardData 对象

粘贴事件的 event 提供了一个 clipboardData 属性,该属性包含了剪切板数据,可以设置和读取剪切板内容。

 

能触发 paste 事件的元素

绑定 paste 事件的元素要聚焦后才能触发粘贴方法。

但不是所有元素聚焦后都能触发粘贴事件,input、textarea、contenteditable=“true” 这3种元素聚焦后粘贴就能触发粘贴事件,其他元素要点击一下元素才能触发,点击也就是聚焦行为。

如果一个 div 上绑定的粘贴事件想要被触发,首先要让其聚焦。但是 div 不是表单元素,不能直接通过 focus() 来使其聚焦,需要在div元素上增加 contenteditable=“true” 先使其变成可编辑元素(该类元素可以使用focus来聚焦),然后给div绑定onmouseenter和onmouseleave方法,鼠标移入时使其聚焦,移出时失焦,这样就能在鼠标移入div区域时粘贴触发onpaste事件。

聚焦后div元素会出现光标

可以设置 div 元素的 opacity 为 0,或者给 div 加上如下样式即可:

{
    outline: none;    
    color:transparent; 
    text-shadow:0 0 0 #000;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/856323.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(2023Arxiv)Meta-Transformer: A Unified Framework for Multimodal Learning

论文链接:https://arxiv.org/abs/2307.10802 代码链接:https://github.com/invictus717/MetaTransformer 项目主页:https://kxgong.github.io/meta_transformer/ 【注】:根据实验结果来看,每次输入一种数据源进行处…

【位操作符的几种题型】

位操作符的几种题型 目录 题型一:寻找“单身狗”。 题型二:计算一个数在二进制中1的个数 题型三:不允许创建临时变量,交换两个整数的内容 题型一:寻找“单身狗”。 1.1题目解析 在一个整型数组中,只有…

Spring 使用注解储存对象

文章目录 前言存储 Bean 对象五大注解五大注解示例配置包扫描路径读取bean的示例 方法注解 Bean Bean 命名规则重命名 Bean 前言 通过在 spring-config 中添加bean的注册内容,我们已经可以实现基本的Spring读取和存储对象的操作了,但在操作中我们发现读…

MySQL DAL单表练习一(学生表)

目录 步骤: 1、创建学生表 2、插入数据 1)查询表中所有学生的信息 2)查询表中所有学生的姓名和英语成绩 3) 过滤表中的重复数据 4) 统计每个学生的总分 5) 所有学生总分上加上10 6) 使…

Java实现COM串口通信

前言 本文主要是实现监听电脑的 com3串口数据 Honeywell的一个扫描识别的器插入 Window笔记本的USB接口。 我的电脑是 Window11的,不需要安装驱动,它自己就有一个 COM3的串口 我把这玩意儿插在我的我电脑的USB接口过后,在电脑的 设备管理器就…

python条件分支和循环语句

python中没有{}的写法,一般时通过缩进的方式来确定分支和循环需要执行的代码块。 if 需要判断的条件表达式:条件成立时的动作 elif 需要判断的条件表达式:条件成立时的动作 else:动作for 变量 in 迭代对象:动作 示例: while 退出条件:动作

【MySql】RR有幻读问题吗?MVCC能否解决幻读?

文章目录 前言RR 隔离级别MVCCRR MVCC 有幻读问题吗?幻读问题演示如何彻底解决幻读?小结 前言 幻读是 MySQL 中一个非常普遍,且面试中经常被问到的问题,如果你还搞不懂什么是幻读?什么是 MVCC?以及 MySQL…

JRebel激活服务搭建彻底解决第三方服务失效问题

下载代理激活服务 下载地址 启动服务 激活插件 随机序列号生成地址:GUID online erstellen 激活地址为:http://127.0.0.1:8888/自己生成的GUID 完成激活 参考资料:2023idea中热部署插件JRebel的激活方式

最长上升序列II

最长上升序列II 有N个数放在一个圆周上,可以从任意一个位置开始按照顺时针方向访问数据一圈,沿途可以挑选一些数,要求这些数是上升的(一个比一个大)。问最多能选多少个数? 输入格式 第一行:1个…

Kafka与Zookeeper版本对应关系

文章目录 了解版本对应Kafka安装包Kafka源码包 了解 比如: kafka_2.11-1.1.1.jar包 其中2.11表示的是Scala的版本,因为Kafka服务器端代码完全由Scala语音编写。”-“后面的1.1.1表示的kafka的版本信息。遵循一个基本原则,Kafka客户端版本和服…

TP、TN、FP、FN的理解

TP、TN、FP、FN的理解 理解英文意思: 在第2个单词的基础上理解第1个单词(即第2个单词是前提条件) TP:True Positive 判定为真的(positive),且判定对了(true) TN&…

解决selenium的“can‘t access dead object”错误

目录 问题描述 原因 解决方法 示例代码 资料获取方法 问题描述 在python执行过程中,提示selenium.common.exceptions.WebDriverException: Message: TypeError: cant access dead object 原因 原因是代码中用到了frame,获取元素前需要切换到frame才能定位到…

【TypeScript】中关于 { 声明合并 } 的使用及注意事项

概念: 在TS中,如果定义了多个相同命名的函数,接口或者class 类,那么它们会自动合并成一个类型 函数的合并: 前面章节讲解的函数重载就是使用了定义多个函数的类型进行合并: function reverse(x: number):…

Git介绍及常用命令详解

一、Git的概述 Git是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理。 Git 会跟踪我们对文件所做的更改,因此我们可以记录已完成的工作,并且可以在需要时恢复到特定或以前的版本。Git 还使多人协作变得更加容易&…

渐进式云渲染和模块式云渲染:二者的区别与选择

云渲染是一种利用云计算技术,将本地的渲染任务分配到远程的服务器上进行高效、快速、低成本的渲染的服务。云渲染可以帮助用户节省时间、资金和硬件资源,提高工作效率和质量。但是,在使用云渲染时,用户需要面对一个重要的选择&…

unable to write symref for HEAD: Permission denied

今天从gitee上面克隆项目到本地时报错如下 warning: unable to unlink ‘D:/IDEAcode/ruiji1.0/.git/HEAD.lock’: Invalid argument error: unable to write symref for HEAD: Permission denied 解决方法:将要存放项目的文件夹权限修改为完全控制 原先权限&…

Unity游戏源码分享-乐节奏休闲游戏源码 guitar hero 支持mobile

Unity游戏源码分享-乐节奏休闲游戏源码 guitar hero 支持mobile 完整版下载地址:https://download.csdn.net/download/Highning0007/88198766

tcl学习之路(四)(vivado设计分析)

1.FPGA芯片架构中的对象 在打开elaborated/synthesied/implemented的情况下,可使用如下命令获取期望的SLICE。SLICE分为SLICEL和SLICEM,由LUT、FF、MUX、CARRY组成。 set all_slice [get_sites SLICE*] set col_slice [get_sites SLICEX0Y*] set all_sl…

Golang bitset 基本使用

安装: go get github.com/bits-and-blooms/bitset下面代码把fmtx换成fmt就行 //------------基本操作------------//构建一个64bit长度的bitsetb : bitset.New(64)//放入一个数b.Set(10)fmtx.Println("add-10:", b.DumpAsBits()) // 0000000…

HttpRunner搭建接口自动化测试项目

前言:前面写过一篇PytestAllure接口自动化测试框架搭建的博客,这篇博客学习另外一款优秀的开源的接口自动化测试框架:HttpRunner,本博客主要学习如何搭建基于HttpRunner的接口自动化测试项目 PytestAllure接口自动化测试框架搭建…