jquery - iOs 跳转包含 INPUT 的固定页脚
<p><p>我有一个 phoneGap-cordova 应用程序。其中我有一个页面有一个固定的输入页脚，但是每当在移动设备中打开软键(键盘)时，固定元素就会失去其位置并向上跳跃，</p>
<p>我已经看到了很多相同的解决方案，但没有运气。 </p>
<p>这是我的页面css:</p>
<pre><code>.main {
display: table;
border-spacing:0px;
margin-top:10px;
margin-left: 18px;
margin-right: 10px;
height: auto;
}
.imageIcon {
display: table-cell;
vertical-align:top;
cursor: pointer;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
padding-left:12px;
width:100%;
}
.nameAndId {
/* background-color: aqua; */
margin-top:6px;
font-family: Roboto-medium;
font-size: 13px;
}
.commentDetails {
margin-top: 5px;
font-size: 12px;
word-break: break-word;
}
.ID
{
font-size: 12px;
display:inline;
}
.updateTime {
float: right;
margin-top: 16px;
font-family: Roboto-light;
font-size: 12px;
color:#767676;
}
.footerClass
{ background:#ffffff;
position:device-fixed;
bottom:0px;
padding: 16px 0px;
width:100%;
display:-webkit-box;
-webkit-box-orient:horizontal;
}
.cameraImage
{
width:initial;
margin-left: 18px;
cursor: pointer;
}
.inputComment
{
margin-left: 10px;
-webkit-box-flex:1;
margin-right:10px;
padding-right:10px;
}
.inputCommentTextBox
{
width:100%;
outline: 0;
border-left:0px;
border-right:0px;
border-top:0px;
border-bottom-width: 1px;
border-bottom-color:#767676;
background-color: transparent;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.postImage
{
width:initial;
cursor: pointer;
margin-right: 10px;
}
</code></pre>
<p>HTML:</p>
<pre><code><div id="mainComment" style="background-color:#ffffff; height:auto;padding-top:1px; padding: 1px 0px 20px;overflow-x:hidden;" >
<div style="background-color:#ededed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;">
<div style="-webkit-box-flex:1;-webkit-flex:1 100%;-ms-flex:1 100%;flex:1 100%;text-align: center;-webkit-align-self: center;-ms-flex-item-align: center;align-self: center;padding-top:4px;padding-left: 20px;">Comments</div>
<div class="cameraImage showPen"><img data-ng-click="returnBack()" style="width: 35px;height: 35px;padding: 10px;" src="close.png" alt="Camera Image"/></div>
</div>
<div data-ng-repeat="name in names" >
<divclass="main" style="background:#ffffff;padding: 10px;">
<div class="imageIcon"><img style="height:56px;width:56px;"src="user.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">{{name}},<p class="ID"> {{xyz}}</p></div>
<div class="commentDetails">{{abc}}</div>
<div class="updateTime timeago" title="" >{{yzk}} ago</div>
</div>
</div>
</div>
<div id="footerId" class="footerClass" >
<div class="cameraImage showPen" data-ng-show="false"><img data-ng-click="returnBack()" style="width:20px;height:20px;" src="close.png" alt="Camera Image"/></div>
<div class="inputComment"><input onfocus="this.value = this.value;" id="commentBox" data-ng-model="commentData" type="text" placeholder="Write your Comment" class="inputCommentTextBox"></div>
<div class="postImage"data-ng-show='postSelector'><imgstyle="width:26px;height:22px;" src="send.png" alt="Search Image"/></div>
<div class="postImage" data-ng-show='loadMoreContentComment'>
</div>
</div>
</div>
</code></pre>
<p>所以每当我将焦点放在固定的页脚中的输入上时，它就会从其位置移位并向上移动。 </p>
<p>请给我建议解决方案，因为我已经经历了很多解决方案，但还没有运气。</p>
<p>谢谢</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>试试这个</p>
<pre><code>$("input").on("focus", function(event){
if(event.handled !== true)
{
$(".footerClass").css({ 'position': 'absolute' });
$(".footerClass").css('display', 'none');
}
return false;
});
$("input").on("blur", function(event){
if(event.handled !== true)
{
if(!$("input").is(":focus")){
$(".footerClass").css({ 'position': 'fixed' })
$(".footerClass").css('display', 'block');
}
}
return false;
});
</code></pre></p>
<p style="font-size: 20px;">关于jquery - iOs 跳转包含 INPUT 的固定页脚，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/30908683/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/30908683/
</a>
</p>
页:
[1]