H5问题总结

红太狼 2020-06-23 17:33 774阅读 0赞

**很多时候设计稿中的icon很小，但是实际制作页面时，如果这个icon可操作，icon的可操作域应该做大一些，不然在设备中会经常发生操作之后没反应（其实是没有触发在操作域上）**

**少掉坑，H5建议**

0.很多时候设计稿中的icon很小，但是实际制作页面时，如果这个icon可操作，icon的可操作域应该做大一些，不然在设备中会经常发生操作之后没反应（其实是没有触发在操作域上**）**

1.设计稿中input输入型元素出现在页面上部，保证软键盘弹出时不会覆盖input，防止页面被键盘顶上去而出现的各种坑。可以设计成多页表单。

2.定位尽量避免不要使用fixed方式，因为手机系统和浏览器的支持差异，会有很多坑需要埋。

当login\_wrap的内容不足填充height:100%时，footer\_box是固定高度固定在底部的容器，其样式最好采用如下方式：

<div class="login_wrap_box">
        <div class="login_wrap">
        </div>
        <div class="footer_box">
        </div>
    </div>
    
    .login_wrap_box{
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .login_wrap {
        width: 100%;
        height: 100%;
        padding-bottom: 2.75rem;
    }
    
    .footer_box{
        position: relative;
        height: 2.75rem;
        margin-top: -2.75rem;
    }

这样页面高度固定一直，不会因为弹出软件盘改变可视窗口高度而引起的底部。

如果还是不行，只能用js暴力解决：

// 解决fixed被键盘挤上去的问题
    setInterval(function(){//$(window).resize(function() {
        if ($(window).height() < currentWinHeight){
            $('.fixed-button').hide();
        }
        if ($(window).height() >= currentWinHeight){
            $('.fixed-button').show();
        }
    }, 100);

3.input中内容垂直居中，最好用height + vertical-align: middle;的方式，用height+line-heigh的方式，某些手机浏览器可能出现input中无内容时光标上偏的问题。

**搜索键盘与事件绑定**

input type="search"即可调用搜索键盘

但是有时候键盘回车键并不一定具有“搜索”或“前往”字样，需要将input包裹在form中，有时还需要填上action属性(仍然不是所有有效)。

回车键事件使用submit。为了防止表单提交时自动刷新页面，js事件中需要组织默认事件：return false。

<form action="#"> <input type="search" /> </form>
    
    另外，如果要移除搜索框的叉叉图标，可以设置样式
    ::-webkit-search-cancel-button { display: none; }

**input 常用的type类型：**

text checkbox radio number submit hiddle password reset  
H5新对象：number email url tel search date time manth week datetime

**自动弹出键盘**

其实弹出键盘很容易，当输入框聚焦的时候，键盘就会弹出。

但是很多情况下，会发现键盘弹出后有隐藏了，这时设置一个延迟聚焦即可解决此问题。

ios似乎还是存在问题，可以试试使用click事件触发focus()，如果不行，我觉得也不必纠结这个小细节。