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

414 阅读2分钟

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