前端杂记 - 简书

记录一下各种小代码

文件上传复位

一般上传文件时，判断触发下一步操作的事件是change事件，但是input上传完之后并不会自己清空，再上传同样文件时候change事件不触发。筛选后采用的复位方法是input外边套一层form，实际运用里显示原生input的概率基本为零，怎么套都看不到。然后input内文件用完之后使用form的reset()方法复位。document.getElementById('formId').reset()

浏览器全屏事件

最近做的项目里用到了全屏的操作，其实浏览器在进入和退出全屏时都会触发一个fullscreenchange事件，监听这个事件可以document.addEventListener("fullscreenchange", e => {})。也可以写document.onfullscreenchange = e => {}，因为是H5的API，注意各浏览器的兼容性问题，需要视浏览器版本适配mozfullscreenchange，webkitfullscreenchange和msfullscreenchange。

按键事件

考虑用户体验除了基本的click、dblclick事件之外还需要配合键盘监听事件，根据键值判断当前按下的按键。

document.onkeydown = event => {
  var e = event || window.event || arguments.callee.caller.arguments[0];
  if(e && e.keyCode==27) { }    //Esc
  if(e && e.keyCode==13) { }    //Enter
};

阻止右键

阻止浏览器右键点击事件window.oncontextmenu = () => { return false; }，局部限制则使用元素选择器替换window即可，使用键盘事件监听2键之后return false;也可以达到目的。另外，选择的onselectstart和复制的oncopy都可以类似实现。

Vant uploader显示图片的小坑

使用van-uploader显示后台传过来的图片时候（视图片地址不同，例如一些不带后缀名的图片资源）偶现无法显示的情况，需要在图片列表里添加isImage:true的属性，就是告诉组件：我是图片，请显示。

阻止微信IOS版浏览器的露底效果（橡皮筋效果）

IOS的橡皮筋效果其实挺好看，但是对开发者而言有点苦，页面可以弹来弹去，页面内列表可以滑来滑去，稍有不慎就是挪列表整个页面动，所以想禁用这个效果。起初使用body的position:fixed是让它不动了，但是列表页跟着不会动了，用addEventListener添加了touchmove事件也因为各种冒泡、捕获的问题抓头发，中间各种尝试就不赘述了，最后的解决方法是引用了iNoBounce的插件，配合body的position:fixed实现了Android和IOS同步。iNoBounce插件的作用就是阻止IOS的webapp在滚动的时候跳来跳去，百十行代码的小插件，阻止底层滚动的同时按照CSS判断需要滚动的DOM元素，实用马一个。另外，addEventListener事件在IOS端的第三个参数需要设置为{passive:false}，而且其实这个对象里是有三个属性的，除了passive外还有capture和once属性。三个属性都是布尔类型的开关，默认值都为false。其中capture属性等价于以前的useCapture参数；once属性表明该监听器是一次性的，执行一次后就自动被removeEventListener干掉。关于passive属性的详细介绍可以移步 passive 的事件监听器进行详细了解

微信浏览器和终端判断

// 获取userAgent
const u = window.navigator.userAgent;
  // 微信浏览器
  if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
    sessionStorage.setItem("wechat", true);
  }
  // Android终端
  if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
    sessionStorage.setItem("Android", true);
  }
  // IOS 终端
  if (u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
    sessionStorage.setItem("IOS", true);
  }

git撤销commit

git reset --soft HEAD^注
--soft不删除工作空间改动代码，撤销commit，不撤销git add。--hard删除工作空间改动代码，撤销commit，撤销git add. 完成这个操作后，就恢复到了上一次的commit状态。

input框自动填充时的背景清除

使用动画配合animation-fill-mode覆盖，当值为forwards时，动画完成后，保持最后一个属性值（停留在最后一个关键帧）。所以不管开始样式怎么样，加上之后就会是最后一帧的样式。也有使用内阴影覆盖的方式，不过只能上色不能去色，需要透明时比较麻烦。

@keyframes resetBg {
  to {
    color: #3ac6f4;
    background: transparent;
  }
}
input{
  border: none;
  animation: resetBg 0.1s forwards;
}