H5移动端痛点问题（不定期更新)

1 关闭ios的input键盘默认大写

<input type='text' autocapitalize='off' />

2 ios开启input的键盘搜索键,点击搜索

<form action="" onsubmit="return false;" id='form' >
  <input type='search' />
</form>

document.querySelector('#form').onkeypress = (e)=>{
  if(e.keyCode===13){  // 点击了搜索
    // ******** ajax
    document.activeElement.blur() // 收起软键盘
  }
}

3 ios点击元素出现灰色蒙层(a,input,button,textarea等)

css加上   -webkit-tap-heiglight-color : rgba(0,0,0,0)

4 ios和Android长按图片出现保存，下载等

css加上 -webkit-touch-callout : none

5 禁止ios和Android选中文本

css加上 -webkit-user-select : none;

6 移动端click的300ms延迟

1. meta加上 user-scalable=no
2. fastclick

7 移动端拍照显示

<button id='btn'>拍照</button>
<input type='file' accept='image/*' capture='camcorder' style='display:none' />

document.querySelector('input').onchange=(e)=>{
  const file = e.target.files[0];
  var filereader = new FileReader();
  filereader.readAsDataURL(file);
  filereader.onload = (res)=>{
    var src = res.target.result;  // 图片路径 base64
  }
}
document.querySeletor('#btn').onclick = ()=>{
  input.click()
}