移动端调用软键盘时,上方出现自定义的view

定义一个假的input框,

定义一个你想显示的view并隐藏

发送

css:.

InputView{

position:fixed;

bottom:50px;

background:#fff;

height:74px;

width:100%;

display:none;

}

.InputView input{

border:#fff;

background:#b9b6b6;

height:30px;

border-radius:20px;

margin-top:10px;

margin-left:28px;

padding-left:10px;

width:232px;

border:none;

/* border: 2px solid #2e9aff; */

    outline:none;

}

.InputView form{

display:inline-block;

}

.InputView p{

display:inline-block;

color:#9a9696;

vertical-align:middle;

}

.oc{

color:red!important;

}

点击时,执行以下逻辑

1.显示真的input

2.自动获取焦点

3.页面加载时判断一下页面高度,软键盘显示时,判断一下页面高度,高度差就是软键盘的高度,把值赋值给自定义view的定位即可

js:

$(function(){

var innerHeight =window.innerHeight;

});

// 底部发表评论部分

 $('#footerInput').click(function(){

console.log(innerHeight);

$('.InputView').show();

$('#ViewInput').focus();

var innerHeightTwo =window.innerHeight;

console.log(innerHeight-innerHeight);

var loginForm=document.forms['loginForm'],

user=loginForm.elements['user'];

user.oninput=function(){

var ViewInputLen =  $('#ViewInput').val();

if(ViewInputLen.length>0){

$('.InputView p').addClass('oc');

}else{

$('.InputView p').removeClass('oc');

}

}

});


4.失去焦点是隐藏view

你可能感兴趣的:(移动端调用软键盘时,上方出现自定义的view)