利用JS API优化输入框粘贴体验

最新推荐文章于 2023-08-15 22:07:33 发布

晨梦天旭

最新推荐文章于 2023-08-15 22:07:33 发布

阅读量206

点赞数

分类专栏： js 文章标签： js 剪切板

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

前言

今天有点小勤奋，就再写一篇博客吧。本文章是在张鑫旭大神博客上学习，大家可以去学习，我会在文章末尾贴出链接。

目前输入框的体验

输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。
下面贴出一张图，是淘宝的注册在这里插入图片描述

利用JS API改变剪贴板内容

下面先贴出代码：

/**
@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;
        }
    });    
});

贴出效果图：
在这里插入图片描述
这里有几处难点：

[].slice.call(arr) slice函数利用call改变this指向，创建了一个arr数组
clipboardData 剪切板对象可以获取
selection 获取选中的文本内容

拖拽输入优化

当我们拖拽文本进入输入框的时候，也可以做类似的优化，效果如下GIF：
在这里插入图片描述
下面贴出代码：

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();
    }
})

在 copy时加版权声明

基于剪切板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\nchenmeng版权');
    }
});

贴出效果图：
在这里插入图片描述