阅读本文约需要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代码如下:
今天就分享到这,今日留言话题:这样优化一下,是不是很实用?一起来说说吧,对于有价值的留言,我们都会一一回复的。如果觉得对你有一丢丢帮助,请点右下角【在看】,让更多人看到该文章。
【我们直招】很苦逼,但工资超级高!