JS操作浏览器剪切板内容

2024-05-14 18:48

本文主要是介绍JS操作浏览器剪切板内容,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

$('#input-signature')发生粘贴事件时获取剪切板上的内容

$('#input-signature').bind('paste',function(e){

var pastedText = undefined;

if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else {
pastedText = e.originalEvent.clipboardData.getData('Text');//e.clipboardData.getData('text/plain');

}

});

下面的例子演示了当选中的文字被复制时,会弹出一个信息提示框:

<html>
<body>
<p οncοpy="alert('文字已被复制到剪贴板!')">这是一些文字</p>
</body>
</html>

下面是一个改进的例子,当页面上的被容被拷贝时,加入版权信息及原文地址:

<html>
<body>
<script type="text/javascript"> 
document.body.oncopy = function(){event.returnValue = false; var txt_cr = document.selection.createRange().text; var copy_cr = "本文来自我爱开发网, 原文地址:http://www.5idev.cn/p-javascript_oncopy.shtml"; clipboardData.setData('Text',txt_cr+'rn'+copy_cr+'rn'); 
} 
</script>
<p>这是一些文字</p>
</body>
</html>

JavaScript oncut 事件

文本域内的内容被剪切时会触发 oncut 事件。

oncut 实例

下面的例子演示了文本域内的内容被剪切时,会弹出一个信息提示框:

<html>
<body>
<input type="text" value="文字内容" oncut="alert('文字已被剪切!')" />
</body>
</html>

JavaScript onpaste 事件

将剪贴板内的内容向文本域粘贴时,会触发 onpaste 事件。

onpaste 实例

下面的例子演示了一个常用的应用,就是禁止向文本域粘贴内容:

<html>
<body>
<input type="text" οnpaste="return false;" />
</body>
</html>

在该例子中,利用 return false 阻止了粘贴这一行为。在实际应用中,当有一些比较重要的数据时,如手机号、登录密码、网银账号等,为了安全考虑必须手动输入,因此在这些表单文本域,通常是设置为禁止粘贴的。


这篇关于JS操作浏览器剪切板内容的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/989561

相关文章

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O

python使用fastapi实现多语言国际化的操作指南

《python使用fastapi实现多语言国际化的操作指南》本文介绍了使用Python和FastAPI实现多语言国际化的操作指南,包括多语言架构技术栈、翻译管理、前端本地化、语言切换机制以及常见陷阱和... 目录多语言国际化实现指南项目多语言架构技术栈目录结构翻译工作流1. 翻译数据存储2. 翻译生成脚本

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

C++实现封装的顺序表的操作与实践

《C++实现封装的顺序表的操作与实践》在程序设计中,顺序表是一种常见的线性数据结构,通常用于存储具有固定顺序的元素,与链表不同,顺序表中的元素是连续存储的,因此访问速度较快,但插入和删除操作的效率可能... 目录一、顺序表的基本概念二、顺序表类的设计1. 顺序表类的成员变量2. 构造函数和析构函数三、顺序表

使用C++实现单链表的操作与实践

《使用C++实现单链表的操作与实践》在程序设计中,链表是一种常见的数据结构,特别是在动态数据管理、频繁插入和删除元素的场景中,链表相比于数组,具有更高的灵活性和高效性,尤其是在需要频繁修改数据结构的应... 目录一、单链表的基本概念二、单链表类的设计1. 节点的定义2. 链表的类定义三、单链表的操作实现四、