文档章节

利用剪切板JS API优化输入框的粘贴体验

红羊在厦门
 红羊在厦门
发布于 10/22 11:07
字数 486
阅读 5
收藏 0

直接复制记录下

/**
@description 表单输入框粘贴体验优化,出处https://www.zhangxinxu.com/wordpress/?p=8003
@author zhangxinxu
*/
// 遍历所有的输入框
[].slice.call(document.querySelectorAll('input, textarea')).forEach(function (ele) {
    ele.addEventListener('paste', function (event) {
        // 输入框类型
        var type = this.getAttribute('type') || this.type;
        // 剪切板数据对象
        var clipboardData = event.clipboardData || window.clipboardData;
        // 粘贴内容
        var paste = '';
        // 剪切板对象可以获取
        if (!clipboardData) { return; }
        // 获取选中的文本内容
        var textSelected = '';
        if (window.getSelection) { 
            // 现代浏览器
            // 直接window.getSelection().toString()对于IE的输入框无效
            textSelected = this.value.slice(ele.selectionStart, ele.selectionEnd);
        } else if (document.selection) { 
            // 旧IE浏览器
            textSelected = document.selection.createRange().text;
        }
        // 只有输入框没有数据,或全选状态才处理
        if (this.value.trim() == '' || textSelected === this.value) {
            // 阻止冒泡和默认粘贴行为
            event.preventDefault();
            event.stopPropagation();
            // 获取粘贴数据
            paste = clipboardData.getData('text') || '';
            // 进行如下处理
            // 除非是password,其他都过滤前后空格
            if (type != 'password') {
                paste = paste.trim();
            }
            // 邮箱处理,可能会使用#代替@避免被爬虫抓取
            if (type == 'email') {
                paste = paste.replace('#', '@');
            } else if (type == 'tel') {
                // 手机号处理
                paste = paste.replace(/^\+86/, '');
                // 如果此时剩余所有数字正好11位
                if (paste.match(/\d/) && paste.match(/\d/g).length == 11) {
                    paste = paste.replace(/\D/g, '');
                }    
            } // 其他类型处理大家自行补充...
            
            // 插入
            this.value = paste;
        }
    });    
});

拖拽也可以使用

input.addEventListener('drop', function (event) {
    // 获取拖拽文本内容
    var text = event.dataTransfer.getData('text');
    if (this.value == '' && text.match(/\d/g) && text.match(/\d/g).length == 11) {
        event.preventDefault();
        input.value = text.replace(/\D/g, '');
        input.select();
    }
});

基于剪切板JS API可以做的事情不仅仅是粘贴,复制的时候也可以做些事情,例如,我可以在我的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪切板文字后面加上一段版权声明。

代码示意:

document.addEventListener('copy', function (event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (!clipboardData) { return; }
    var text = window.getSelection().toString();
    if (text) {
        event.preventDefault();
        clipboardData.setData('text/plain', text + '\n\n鑫空间版权所有');
    }
});

 

本文转载自:https://www.zhangxinxu.com/wordpress/2018/09/js-clipboard-api-paste-input/

共有 人打赏支持
红羊在厦门
粉丝 1
博文 36
码字总数 16834
作品 0
厦门
程序员
私信 提问
前端er怎样操作剪切复制以及禁止复制+破解等

前言 有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。...

OBKoro1
10/29
0
0
实现textarea限制输入字数

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限...

罪恶的花生
2014/03/28
0
1
Js控制文本框只能输入中文、英文、数字与指定特殊符号

JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控......

丿Dean
2014/07/29
0
0
Zero Clipboard-js复制到剪切板(支持多浏览器)

在前端开发中经常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下可以通过clipboardData.setData来实现,但是这个方法却不能兼容其他的浏览器。显然这种方法在这个浏...

mickelfeng
2014/01/22
0
0
javascript 实现跨浏览器的粘贴,复制,剪切功能(转)

这两天在做跨浏览器的粘贴、复制、剪切功能。 本以为是很简单的事,原来并不简单。 网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案(zero clipboard.js)。没有跨浏览器粘贴的...

苏叶晚晚
2012/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux虚拟机安装VmwareTool

1.点击虚拟机: 2.点击安装Vmware-Tools,出现如下界面,将圈起来的拖动到桌面 3.接着打开终端,执行解压缩命令 tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz 这个后面的VMwareTools-10.2....

陈刚生
15分钟前
0
0
Java学习笔记(1) --JSE 、JEE、 JME三者的区别

java SE : java standard edition , JSE。它允许允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的java应用程序。 java SE包含了java Web 服务开发的类,并为java platform ,e...

hellation_
18分钟前
1
0
kafka 环境配置

https://www.cnblogs.com/fly-piglet/p/7762556.html

steel7c4
21分钟前
0
0
关于人工智能的思考

像人类一样可以思考,可以创造的人工智能会出现吗? 个人认为:会出现。但是出现的时间,取决了于硬件架构,和运算架构实现的时候。原因在于,人类智能可以出现,机器智能为什么不可以呢,不...

janl
23分钟前
0
0
破界!Omi生态omi-mp发布,用小程序开发生成Web

omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components,用来开发 PC、手机浏览器或者微信、手Q webview 的 Web 页面。自今年5月开源以来,...

腾讯开源
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部