h5移动端项目问题及解决方案

iOS如何取消input首字母大写

• 添加一个属性 设置一下即可
• autocapitalize = ' off '

// 设置后  每次进入键盘的时候  首次输入字母不会大写
<input type='text' autocapitalize='off'>

移动端input键盘右下角搜索按钮是怎么出来的?

• 正常情况下是换行 但是有写软件点击input的时候弹出来的是搜索
  – 把input改成serch就可以弹出搜索按钮
• 但是使用form的时候 用了serch会自动跳转到action的地址 页面就会跳转了
  – 所以要在form上添加onsubmit = 'return false'阻止action的提交 改成自己提交
• 如果遇到跳转页面后 键盘还是没有放下来的情况
  – 可以给input注册失去焦点事件来关闭键盘

<form action="" onsubmit='return false'>
      <input type="serch">
</form>

页面元素被触摸时产生的背景半透明灰色蒙层怎么处理?

• a button input 文本域 都会出现这样的问题
  – 在元素的样式上添加这个样式

-webkit-tap-highlight-color:rgba(0,0,0,0)

改变表单输入框的placeholder的颜色

• 需要给input添加一个样式

input::-webkit-input-placeholder{  
      color:red   //变成红色
    }

禁止ios或者安卓的长按保存图片

• 给图片设置一个样式即可

img{
    -webkit-touch-callout: none
}

禁止ios或者安卓的长按复制文字

• 给盒子设置一个样式即可

p{
    -webkit-user-select: none
}

移动端拍照怎么做

• 用按钮替换的方式
  – 本身input type为file有拍照功能 但是样式的效果不好
  – 隐藏input file按钮 设置为透明 用漂亮的按钮代替
  – 然后点击按钮触发拍照的按钮
• 点击按钮直接弹出相机 不会弹出上传文件
  – 主要就是capture="camcorder"这个属性
• 如果需要获取到照片的内容 给input添加change属性

<input type="file" accept="image/*"  capture="camcorder">

移动端click事件300ms延迟的问题

• 历史遗留问题 点一下还是点两下 不确定
  – 点两下是放大屏幕 点一下是click事件
• 在html的meta里添加静止缩放页面即可
  – 主要还是缩放导致的延迟

<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no>

• 或者用touch来代替click