html5兼容问题总结-201802

1、用fixed定位做的弹出框，弹出框里面有文本框。fixed在ios上兼容不友好，会造成光标乱跳。

解决方法：当弹出框弹出时给父元素加上fixed定位，此时页面无法滚动；弹出框关闭时移除fixed定位，页面恢复正常滚动。网上建议用better-scroll,或者用absolute定位改写弹出框。

2、弹性盒布局在低版本的ios上兼容性不太好（justify-content、flex:1）

3、<input type="file">在iOS上可以直接调用照相机拍照，竖拍出来的图片都会变成横图；然而上传后的图片正常，没有翻转。

4、低版本的ios不支持keyup事件

改用指令给元素绑定input事件

<!-- xxx.vue -->
<textarea :value="posterWord" maxlength="30" v-input="updatePosterWord"></textarea>

// 注册一个全局自定义指令v-input
Vue.directive('input', {
  // 当被绑定的元素插入到 DOM 中时
  inserted: (el, binding, vnode) => {
    el.addEventListener('input', function(e){
      const currentVm = vnode.context
      const funcName = binding.expression
      currentVm[funcName](e.target.value)
    }); 
  }
})