js 复制文本到剪切板_利用剪切板JS API优化输入框的粘贴体验

阅读本文约需要5分钟

大家好，我是你们的导师，我每天都会给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次给大家分享了如何在HTML标签和JS中设置CSS3 var变量，今天给大家分享下如何优化输入框的粘贴体验。

1. 目前现在的体验问题

输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。

举两个真实案例：

1)阿里云域名解析，结果粘贴后下面这这样：

从网页中复制内容的时候，不小心前面多复制了一个长空格，结果出现了格式报错，我们还需要重新删除前面空格，如果我们粘贴的时候直接过滤前后空格，体验岂不更好！

2)简历中的手机号码，候选人经常会空格或者短横线进行3-4-4分隔，复制后粘贴，结果也失败了：

如果直接剪切板中过滤到手机号以外乱七八糟的字符，岂不是少去重新编辑的烦恼，用户体验大大提升，用户一看，我明明复制的是不合法的手机号，粘贴进来进来变成合法11位数字，好神奇，体验好好，对这个产品刮目相看，微博，朋友圈，同事圈大肆宣传，其价值就不可估量了。

2. JS改变剪切板内容

我们可以利用Clipboard API改变剪切板内容，从而提高输入框粘贴信息的交互体验。

大体上，该API浏览器都有所支持，但都是部分支持，不过，本来就是增强体验的东西，就算只有一个浏览器支持，也是可以用起来的。

下面这段JavaScript代码实现的是针对输入框的的粘贴处理(IE9+支持)。然后演示了邮箱，手机号剪切板数据的简单过滤处理，其他场景大家可以自行补充。

MIT协议，大家可以随意复制粘贴，只要前面一段版权溯源注释代码保留即可。

例如，复制demo页面手机输入框后面的手机号码，然后粘贴到输入框中，会看到中间的短横线自动被过滤了。

上面代码对剪切板内容的处理比较简单，就是过滤前后空格，邮箱#替换成@，手机号11位标准格式化。大家可以根据实际需求进行更好的处理，例如，XSS过滤可以直接在剪切板中进行等。

当我们拖拽文本进入输入框的时候，也可以做类似的优化，效果如下GIF：

相关JavaScript代码如下：

今天就分享到这，今日留言话题：这样优化一下，是不是很实用？一起来说说吧，对于有价值的留言，我们都会一一回复的。如果觉得对你有一丢丢帮助，请点右下角【在看】，让更多人看到该文章。

【我们直招】很苦逼，但工资超级高！