移动端H5开发小经验

2017-04-26

Android手机软键盘挡住输入框？Android设置border-radius,背景颜色溢出？页面上数字变成可以点击的电话号码？

在点击输入框时，软键盘升起会挡住输入框，IOS手机则会把输入框顶起来不会遮住。
解决办法是:给输入框添加一个点击事件

clickHandler(e){
    setTimeout(function(e){
        e.target.scrollIntoViewIfNeeded();
    },400);
}

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面

1
2
3

<head>
  <meta name="format-detection" content="telephone=no">
</head>

1 2	<input type='number' pattern="[0-9]*"/> <input type='tel'>

最近有个项目，其中有个场景是这样的，一个批量选择图片的页面还带分页，在选择图片时checkbox从未选择状态变为已选择状态，在安卓上反映很快，在ios上表现很迟钝。原来这是因为click事件300ms延时导致的。

并不是只有ios才有click事件300ms延时，设计click事件300ms延时的原因是为了支持双击缩放，判断是否在300ms内有第二次点击。支持双机缩放这种功能的一都般会有单击延时的问题。
chrome 和 firefox 的移动版本禁用缩放就可以解决300ms延时的问题

但是这在移动端safari上并不起作用。

可以通过监听 touchend事件处理， touchend事件没有延迟。
另外还可以使用fastclick，可以看下 fastclick github

移动端safari上不支持autofocus，可以查看MDN autofocus Browser_compatibility
只能通过用户主动出发事件时手动聚焦。
例如：

1	<input type='text' id='focus'/>

1
2
3

document.addEventListener('touchend',function(){
    document.getElementById('focus').focus();
})