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

定义一个假的input框，

<input id="footerInput" type="text" placeholder="请收入" onfocus="this.blur();">

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

<div class="InputView">

<form name='loginForm'>

<input id="ViewInput" name="user" type="text" placeholder="请收入">

</form>

<p>发送</p>

</div>

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