2018年09月 存档

拖拽献祭中的黑山羊-DataTransfer对象

2018年09月30日,星期日

解构datatransfer对象

伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法!凡是不能手写页面元素拖拽效果者,即死,需10日才能复活!顿时,无数前端手足无措,惊恐万分,仓皇而逃,但终究难逃一死。此时,一位小白前端横空出世,靠着解构此魔法的关键DataTransfer对象,破解了这个超位魔法,挽救了无数的前端开发,而其破解的详细信息已经记录在这篇文章中……

阅读全文…

直接剪切板粘贴上传图片的前端JS实现

2018年09月21日,星期五

剪切板上传图片缩略图

可能有小伙伴并不知道,在网页中,我们直接Ctrl+V也是能够上传图片的。诶?真有这么厉害?没错,就是这么厉害!要不进去瞅瞅,现成的源代码,高保真的demo,包你分分钟学会这种姿势,哦,不,知识!

阅读全文…

利用剪切板JS API优化输入框的粘贴体验

2018年09月9日,星期日

剪切板粘贴优化缩略图

输入框输入内容我们有时候为了方便,会直接粘贴内容,例如IP,网址,或者陌生人的手机号。但是,有时候我们复制的内容包含冗余信息,或者格式不准确,还需要重新编辑,体验就不好了。实际上,我们可以直接控制剪切板里面的复制的文字内容,可以实现粘贴的数据是我们希望的准确的数据格式,省去用户重新自己编辑的麻烦,可以有效提升用户的交互体验。

具体该如何实现呢?请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。

阅读全文…

借助wbr标签实现连续英文字符的精准换行

2018年09月1日,星期六

文章头图

在web网页中,连续英文单词默认是不换行的,使用word-break虽然能够有效,但是,会有一个很明显的问题,这换行的位置把英文单词直接破开了,可读性下降。有没有什么方法,技能换行,又不破坏单词呢?可以试试HTML中的wbr标签。

阅读全文…