文档章节

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

红羊在厦门
 红羊在厦门
发布于 2018/10/22 11:07
字数 491
阅读 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
博文 41
码字总数 18720
作品 0
厦门
程序员
私信 提问
无需 Flash 使用 jQuery 复制文字到剪贴板

如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案,最可能的结果就是使用Flash的方案来做这个事,虽然使用Flash可以很好地解决这个问题,但是这不是一个明智的想法,因为这个...

oschina
2016/03/12
11.5K
13
前端er怎样操作剪切复制以及禁止复制+破解等

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

OBKoro1
2018/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
javascript 实现跨浏览器的粘贴,复制,剪切功能(转)

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

苏叶晚晚
2012/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

条形码设计软件BarTender实用教程——透明度样本标签

BarTender是一款优秀的标签、条形码、卡片以及RFID标签设计和打印软件。所有版本的BarTender都具有独立的设计和打印功能,对于更高级的用户,自动化版和企业自动化版本提供了更强大的集成功能...

ymy_666666
36分钟前
0
0
Sql--order by、desc降序、top

Sql--order by、desc降序、top ---------通过order by 语句进行排序: --1.降序order by 列名desc --2.升序order by 列名 或order by 列名asc --3.order by语句必须一定要放在整个sql语句的最...

linjin200
37分钟前
4
0
websocket wss所需的nginx配置以及解决golang作为服务端的跨域问题

下面的配置是微信小程序所需的wss的配置,这里为了方便,,也为了避免使用端口号,和原项目的配置写在一起了,因此使用了固定后缀/wss,以作区分,配置的重点就是location /wss 段,其之后的部分是原...

漫步海边小路
38分钟前
3
0
数字转换汉语中人民币的大写

最终结果输出:你输入的金额为:【123】 大写金额: [壹佰贰拾叁] 下面是实现代码: /** 6 * 数字转换为汉语中人民币的大写<br> 7 * 8 * @author Arvin 9 * @contact 94...

政旭Arvin
48分钟前
2
0
智能合约编程/Dapp漏洞 -- 默认可见性修饰符

Solidity函数有visibility指定符,标明函数如何被允许访问。Visibility决定一个函数是否能被用户,被其他派生合约,从外部调用,仅从内部调用等等。有4个visibility指定符.函数默认的visibil...

怎当她临去时秋波那一转
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部