手机端经典键盘事件
<style type="text/css"> body, div, p, img, span ,li,ul{ margin: 0; padding: 0; font-family: "微软雅黑"; } img { border: none; } ul, li { list-style: none; } .xlhn_content { width: 960px; height: 1000px; margin: 0 auto; background: url("${base}/resources/image/hunan_gyact/cytx_bg_pc.png") no-repeat; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } ::-webkit-input-placeholder { /* WebKit browsers */ font-size:25px; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size:25px; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:25px; } :-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:25px; } .xontent-mid{ text-align: center;padding-top:40%;font-size: 30px; } .xontent-mid input { width: 50%;height: 5%;border-radius: 10px;outline: none;border: none;padding-left:30px ; font-size: 25px;; } #yidcard{ margin-top: 30px; } .xontent-mid label{ margin-right: 20px; } .xontent-bottm{ margin-top: 30%;text-align: center; } .xl_joigz{ background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat; display: inline-block;width: 250px;height: 65px; background-position: center;background-size: contain; } .xl_joinin{ background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat; display: inline-block;width: 250px;height: 65px; background-position: center;background-size: contain; } @media only screen and (min-device-width: 240px) and (max-device-width: 760px) { html,body{ width: 100%;height: 650px; } .modal{ width:60%;margin-left:-30%; } .xlhn_content { width: 100%;height:100% ; background: url("${base}/resources/image/hunan_gyact/cytx-bg.png") no-repeat; background-repeat: no-repeat; background-position: center; background-size: cover; margin: 0px; padding: 0px; } #yidcard{ margin-top:0; } .xontent-mid input{ font-size:16px; } .xontent-mid{ color: #fff;text-align: center; padding-top:65%; font-size:16px; } .xontent-bottm{ width:100%;margin-top:150px;text-align: center; } .xl_joinin{ display: inline-block; width: 150px;height:53px ; background: url("${base}/resources/image/hunan_gyact/tj.png") no-repeat; background-size: 150px 53px; } .xl_joigz{ display: inline-block; width: 150px;height:53px ; background: url("${base}/resources/image/hunan_gyact/guanzhu.png") no-repeat; background-size: 150px 53px; } ::-webkit-input-placeholder { /* WebKit browsers */ font-size:16px; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size:16px; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:16px; } :-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:16px; } .xontent-mid input{border-radius: 26px;background: #fff;color: #262626;padding:10px;width:60%;margin-bottom:10px;} } @media only screen and (max-device-width:350px) { html,body{ height: 570px; } }
<div class="xlhn_content"> <div class="xontent-mid"> <p><input type="text" name="" id="yname" value="" placeholder="请输入您的真实姓名"/></p> <p><input type="text" name="" id="yidcard" value="" placeholder="请输入您的身份证号"/></p> </div> <div class="xontent-bottm"> <a href="javascript:;" class="xl_joinin" id="getOn"></a> </div> </div>
$('#yname').bind('focus',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height('auto');
});
$('#yidcard').bind('focus',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
$('.xontent-bottm').css({'position':'static'});
//或者$('#viewport').height('auto');
});
你要觉得这篇文章比较好,记得点推荐!