背景:
拼接数据以英文分号为分隔符,所以需要禁止用户输入分号,最开始只是监听了按下键盘事件,测试的时候发现在文档写好数据可以粘贴并不能完全过滤分号导致数据拆分出现问题,需要在数据粘贴的时候对数据进行处理
一、监听键盘事件
给input框添加监听键盘按下的事件
若监听到英文分号被输入,阻止输入事件并给用户提示
二、监听粘贴事件
监听input框的粘贴事件
替换粘贴内容
一开始的设想是获取到粘贴的内容,处理后再返回给系统,系统继续粘贴动作,但是扒拉了好多文档以后发现系统没有提供这样的方法,因为我的需求里有好多个input框,所以想当然的就想到通过e.target.value来把处理好的内容拼接到目标input的value上,然后发现因为用的是vue的双向绑定,所以通过修改e.target.value会出现页面上显示的值与绑定的值不一致的问题。所以修改的必须是数据绑定源的数据
给input框设置data-*属性,可以获取到此条数据绑定的key值,和在table里对应的索引值
从e.target.dataset里可以获取到当前操作的input设置的属性值,就可以从数据源里找到当前input绑定的数据进行粘贴的赋值了