问题列表

输入框自动填充颜色

Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit内核自动添加的，对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。
效果图

A:方案如下
1 设置标签的autocomplete=”off”,亲测无效可能
2 设置盒子的内阴影为你常态的颜色（下面以白色为例）

  1. box-shadow:0 0  0 1000px  #fff inset ;
  2.  -webkit-box-shadow: 0 0 0px 1000px #fff inset;

手机拍照和上传图片

Q: 针对file类型增加不同的accept字段
A:代码如下

  1. <input type="file">的accept 属性
  2. <!-- 选择照片 -->
  3. <input type=file accept="image/*">
  4. <!-- 选择视频 -->
  5. <input type=file accept="video/*">

解决字体在移动端比例缩小后出现锯齿的问题

Q: 解决字体在移动端比例缩小后出现锯齿的问题
A:代码如下

  1. -webkit-font-smoothing: antialiased;

如何禁止保存或拷贝图像

Q: 如何禁止保存或拷贝图像
A:代码如下

  1. img{
  2. -webkit-touch-callout: none;}

点击样式闪动

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框：outline:none；

  1. -webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
  2. // i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
  3. -webkit-tap-highlight-color : transparent ;

移动端如何清除输入框内阴影

  1. -webkit-appearance: none;

屏蔽用户选择

Q: 禁止用户选择页面中的文字或者图片
A:代码如下

  1. -webkit-touch-callout: none;
  2. -webkit-user-select: none;
  3. -khtml-user-select: none;
  4. -moz-user-select: none;
  5. -ms-user-select: none;
  6. user-select: none;

备注，禁止选择不能用在输入框上，已经发现的在ios上会禁止输入。

所以输入框的部分要设置为正常可用：

  1. input {      
  2.      -webkit-user-select:auto; //webkit浏览器    
  3. }

关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

Q: 如题
A: 解决方案：通过正则替换

  1. this.value = this.value.replace(/\u2006/g, '');

移动端点透问题

Q: 如题,当点击绝对定位元素的时候，下面的元素虽然被遮盖，但也被触发了。
A: 原因是：touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
解决方案：

（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a标签的click
（4）延迟一定的时间(300ms+)来处理事件 （不推荐）
（5）以上一般都能解决，实在不行就换成click事件。

移动端300ms点击延迟

Q: 移动端点击会有300ms的延迟，主要解决方案是fastclick的轻量库。延迟的原因：浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。

A:FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。github地址：fastclick。

备注：如果你的事件里支持touchstart的事件，直接用touchstart的事件即可解决这个问题。

video 不能自动播放

Q: 如题
A: 解决方案：
(1) autoplay 及 js 控制播放，仍然有部分设备不起作用
(2)

  1. $("html").one("touchstart",function(){
  2. 　　　　　　video.play();
  3. 　　　　})

在微信中可以加入这段:

  1. document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('music-audio').play() }, false)