In many cases, the icon in the design draft is very small, but when the actual page is made, if the icon is operable, the operable field of the icon should be larger, otherwise there will often be no response after the operation in the device (actually, the operation is not triggered. domain)
Less pitfalls, H5 suggestion
0. Many times the icon in the design draft is very small, but when actually making the page, if the icon is operable, the operable field of the icon should be larger, otherwise there will be no response after the operation often occurs in the device (actually, it is not triggered on the operational domain )
1. In the design draft, the input input element appears at the top of the page to ensure that the soft keyboard will not cover the input when it pops up, preventing various pits that appear when the page is pushed up by the keyboard. Can be designed as a multi-page form.
2. Try to avoid using the fixed method for positioning. Because of the differences in the support of mobile phone systems and browsers, there will be many pits that need to be buried.
When the content of login_wrap is insufficient to fill height: 100%, the footer_box is a container with a fixed height at the bottom , and its style is best used as follows:
<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;
}
In this way, the height of the page is fixed all the time, and the bottom will not be caused by popping up the software disk to change the height of the visible window.
If it still doesn't work, you can only use js violence to solve it:
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"});
}
});
// Solve the problem of fixed being squeezed by the keyboard
setInterval(function(){//$(window).resize(function() {
if ($(window).height() < currentWinHeight){
$('.fixed-button').hide();
}
if ($(window).height() >= currentWinHeight){
$('.fixed-button').show();
}
}, 100);
3. The content in the input is vertically centered . It is best to use the method of height + vertical-align: middle;, and the method of height+line-heigh. Some mobile browsers may have the problem of the cursor being offset when there is no content in the input.
Search keyboard and event binding
input type="search" to call the search keyboard
But sometimes the keyboard enter key does not necessarily have the words "search" or "go", the input needs to be wrapped in a form, and sometimes the action attribute needs to be filled in (still not all valid).
Enter key event using submit. In order to prevent the page from being automatically refreshed when the form is submitted, the default event needs to be organized in the js event: return false.
<form action="#"> <input type="search" /> </form>
Also, if you want to remove the fork icon of the search box, you can set the style
::-webkit-search-cancel-button { display: none; }
Commonly used types of input:
text checkbox radio number submit hiddle password reset
H5 new object : number email url tel search date time manth week datetime (some types of IOS seem to be no longer supported, check http://caniuse.com by yourself )
Reference link: http://www.cnblogs.com/perryxiong/archive/2013/12/18/3480019.html
Automatically pop up the keyboard
In fact, popping up the keyboard is very easy, when the input box is focused, the keyboard will pop up.
However, in many cases, it will be found that the keyboard is hidden after popping up. In this case, setting a delayed focus can solve this problem.
ios seems to still have problems, you can try to use the click event to trigger focus(), if not, I don't think you need to worry about this small detail.