剪切、复制、粘贴事件

剪切、复制、粘贴事件

  • 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.hqwc.cn/news/60221.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Flask.Request的方法和属性,获取get和post请求参数(二)

1、Flask中的request 在Python发送Post、Get等请求时,我们使用到requests库。Flask中有一个request库,有其特有的一些方法和属性,注意跟requests不是同一个。 2、Post请求:request.get_data() 用于服务端获取客户端请求数据。注…

RocketMQ发送消息失败:error CODE: 14 DESC: service not available now, maybe disk full

在执行业务时,发现MQ控制台没有查询到消息,在日志中发现消息发送失败,报错error CODE: 14 DESC: service not available now, maybe disk full 分析报错应该是磁盘空间不足,导致broker不能进行正常的消息存储刷盘,去查…

WPF实战项目十一(API篇):待办事项功能api接口

1、新建ToDoController.cs继承基础控制器BaseApiController,但是一般业务代码不写在控制器内,业务代码写在Service,先新建统一返回值格式ApiResponse.cs: public class ApiResponse{public ApiResponse(bool status, string mess…

ssm学院党员管理系统源码和论文PPT

ssm学院党员管理系统源码和论文PPT002 开发工具:idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具:navcat,小海豚等 开发技术:java ssm tomcat8.5 选题意义、价值和目标: 随着鄂尔多斯应用技术学院招生规模的不断扩大&…

Git仓关联多个远程仓路径

前言 Git仓如果需要将代码push到多个仓,常用的做法是添加多个远程仓路径,然后分别push。这样虽然可以实现目的,但是需要多次执行push指令,很麻烦。 本文介绍关联多个远程仓路径且执行一次push指令的方法:git remote …

Linux操作系统(二):操作系统结构与内核设计

在(一)详解CPU中介绍了操作系统所基于的硬件CPU后,本部分学习操作系统的架构。在计算机系统中,操作系统的架构通常包括以下几个主要组件: 内核(Kernel) 进程管理(Process Management…

把大模型装进手机,分几步?

点击关注 文 | 姚 悦 编 | 王一粟 大模型“跑”进手机,AI的战火已经从“云端”烧至“移动终端”。 “进入AI时代,华为盘古大模型将会来助力鸿蒙生态。”8月4日,华为常务董事、终端BG CEO、智能汽车解决方案BU CEO 余承东介绍&#xff0c…

数字化管理,让MRO工业品更高效

MRO商品数字化是将MRO商品的采购、库存及记录过程进行数字化管理,以提高MRO商品的效率和可控性。MRO(Maintenance, Repair and Operations)一般用于维修、保养及日常运营工作中,包括五金工具、紧固件、精加工刀具、备品备件、切屑…

【一】初步认识数据库

数据库概览数据库 缘起表(Table)的理解用表来定义数据库数据库系统的理解概念层次的理解实例层次的理解 数据库管理系统的理解从用户角度看从系统实现角度看典型的数据库管理系统 数据库语言数据库定义、操纵、控制语言数据库语言 VS 高级语言 内容回顾练习 数据库概览 走马观…

Jmeter +Maven+jenkins 接口性能全自动化测试

背景: 首先用jmeter录制或者书写性能测试的脚本,用maven添加相关依赖,把性能测试的代码提交到github,在jenkins配置git下载性能测试的代码,配置运行脚本和测试报告,配置运行失败自动发邮件通知&#xff0c…

浪潮数字咨询专家孙崇虎受邀为第十二届中国PMO大会演讲嘉宾

浪潮数字企业技术有限公司集团管控事业部咨询专家孙崇虎先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾,演讲议题:VUCA时代的项目管理信息化应对。大会将于8月12-13日在北京举办,敬请关注! 议题简要: 当前…

NGINX组件(rewrite)

一、location匹配的规则和优先级(*) URI:统一资源标识符,是一种字符串标识,用于标识抽象的或者是物理资源;如:文件、图片、视频等 nginx中的URI匹配的是:网址”/“后的路径 如&…