H5问题总结

很多时候设计稿中的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暴力解决：

扫描二维码关注公众号，回复： 158959 查看本文章

var wh=$(window).height();
$(window).on("resize",function(){
    var wh2=$(window).height();
    if(wh<=wh2){
        $(".btn-box").css({position:"fixed"});
    }else{
        $(".btn-box").css({position:"relative"});
    }
});

// 解决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 (有些type IOS似乎已不支持，自行查阅http://caniuse.com)

参考链接：http://www.cnblogs.com/perryxiong/archive/2013/12/18/3480019.html

自动弹出键盘

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

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

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

猜你喜欢