关闭

记一个复制黏贴的功能想法(黏贴剪切板中的数字自增,复制黏贴自增)

标签: 交互设计浏览器插件
222人阅读 评论(1) 收藏 举报
分类:
起因
         照例是要写起因的,起因非常之简单,不知道大家有没有遇到过需要输入连续的  id= 101 ~ id = 110 这类数字的时候,这个时候能做的基本上是复制100,黏贴100,然后手动改 101,102,在我的脑海里,除了使用excel ,其他没有很方便的可以复制黏贴自增序列的办法。
         问了度娘,好像目前市面上的软件基本上也不带这个功能,哪怕是经常会有录入操作的报表,报账等等系统(统统没有这个功能,心疼财务). 很好奇这个看起来并不复杂的小功能却没人去做。
         作为程序员,忍不住就简单的设计了下,如果是内嵌在软件里的,可以 是这样: ctrl+ c+1 复制 ->  ctrl+ v 的时候就自动 +1 ,再按就+ 2,如果 ctrl+ c+2 复制 ->  ctrl+ v 的时候就自动 +2 ,再按就+ 4, 依次累加。

实现

       一般软件也没有办法去改,于是抱着玩和学习的目的决定做个浏览器插件。由于一直后台从来没有做过前端或者插件(看了下,涉及到的东西博大精深),请大神们对我这个初心者轻喷。。
       一开始想通过直接编辑系统剪切板来完成,这种方法最直接,最有效 ,语句:
Document.execCommand('copy')
        可惜的是,这个函数因为安全考虑只有在为数不多的版本中支持(如图)。
       
         无奈只能改变策略通过JS 监听  paste事件来完成,将复制内容从事件剪切板  clipboardData (这玩意相当于浏览器剪切板,和系统的不是一回事,但是系统的会先放到这儿,再放到浏览器上) 中取出时候做处理。种方法优点是简单很多,但是缺点也很明显,举个例子,比如云笔记的输入时,对方同样监听了 paste ,并且 e.preventDefault(); 停止了消息传递,我们这个插件也就没法继续工作了 。 语句:
document.addEventListener( 'paste', function (event){})
        上面的方法拿到剪切板的值后,后续过程就很容易了。先判断是否是数字,再判断右上配置是否开启了自增功能,最后判断是否还是同一个值的paste操作 , 如果都满足,统计总计paste的次数,把数字加上这个值,然后输出。。

        总体就是这样,很简单的一个小玩具,总之并不复杂,我觉得功能的意义大于程序的意义。有产品或者交互的同学可以考虑下在某些特定环境软件中加入这个小功能哦!


附件
git 地址: https://github.com/NickTree/Chrome_CountPaste
打开后在chrome 中选择 扩展程序 -> 加载压缩的扩展程序 -> 右上就会有小图标 ,浏览器版本适应性啥的完全没测过,反正就当个原型吧。
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21375次
    • 积分:343
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:14条
    最新评论