常见问题-6

h5网站设置为type=number 的问题

1 .maxlength属性不好用，需要自己在oninput上面重写这个函数

function checkMaxLength(obj,len){
  if(obj.value.length>len){
     obj.value=obj.value.substr(0,len)
  }
}

2 .form 提交的时候默认取整:这种我一般都是直接提交一个json，不是form的方式提交

<input step='0.01'></input>

3 .不分安卓手机样式会有问题，需要重置样式

input,textare{
  border:0;
-webkit-appearance:none;
}

往返缓存问题

1 .点击浏览器的回退不会自动执行js，也别是移动端ios里面，主要原因是点击返回按钮的时候，之前的页面做了缓存，

window.addeventlistener('pageshow',()=>{
  window.reload()
//或者在这里再出发一下页面组件的onMounted事件
})

2 .onpageShow 每次页面加载都会触发，无论是从缓存中加载还是正常加载，这是他和onload的区别。persisted可以判断页面是否从缓存中读出

ios中input 键盘对keyup,keydown,keypress等支持不好的问题

1 .某些事件检测不到中文输入，某些事件检测不到英文输入。所以统一用html5的oninput事件来替代keyup
2 .包括select,radio,checkbox等也是用这个

ios键盘首字母输入，默认大写字母的解决方案

<input autocapitalize='off' autocorrect='off'></input>
1 .这个要不要改变感觉还是要看用户的使用习惯，有的人可能就习惯了切换一下

某些情况非可点击元素label,span等监听click事件，ios下不会触发

1 .cursor:pointer

输入框默认字体颜色

input:-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color:"red"
}

ios 上拉边界下拉出现空白

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

ios 下fixed失效

1 .软键盘唤起之后，页面的fixed元素将失效，会变成absolute，所以当页面超过一屏时，失效的fixe元素就会跟随滚动了。
2 .不仅仅局限于type=text的输入框，凡是软键盘，比如时间日期选择器，select等被唤起的时候，都会遇到同样的问题
3 .解决方案

不让页面整体滚动，而是单个的自己滚动，主体高度设为100%，overflow:scroll

4 .其他问题

1 .fixed 定位的容器内不能有input，在input聚焦的时候去掉fixed状态，改为absolute，绝对定位的效果通过js来实现
2 .不要再可滚动的容器内包含fixed定位的子元素
3 .键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动

5 .根据这些原则，移动端最高不用fixed元素，会有很多问题，但是自己的项目没遇到过这些问题，是没测出来，还是一屏页面导致这些bug没有暴露出来