如何使用Android上的键盘使元素向上移动（HTML 5应用程序）
[英]How to make an element move up with the keyboard on android (HTML 5 app)
问题描述
I want to make my text field that I've fixed to the bottom of the screen move up with the keyboard, basically making it stick to the keyboard. 
我想让我固定在屏幕底部的文本字段向上移动键盘，基本上它会粘在键盘上。 This is how it looks without the keyboard, the element I want to move up with the keyboard is the footer. 这就是它没有键盘的样子，我想用键盘向上移动的元素就是页脚。 When the keyboard pops-up it now goes over the input field, so you can't see what your typing. 当键盘弹出时，它现在会越过输入字段，因此您无法看到键入的内容。 How could I fix this? 我怎么能解决这个问题？ Thanks in advace! 谢谢你的推荐！
The html for this part: 这部分的html：
<footer class="mdl-shadow--8dp">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="addItemDescription">
<label class="mdl-textfield__label" for="addItemDescription">What do I need to do?</label>
</div>
<button id="addItemButton" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp">
<img class="material-icons" src="./res/material_icons/ic_add_white_24px.svg"></img>
</button>
</footer>
And the CSS: 而CSS：
footer{
position: fixed;
z-index: 700;
text-align: center;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #bdbdbd;
}
.mdl-textfield__label{
color: #4c4c4c;
font-size: 30px;
}
.mdl-textfield__label:after{
background: #f2f2f2;
}
.mdl-button--fab.mdl-button--colored {
background: #778f9b;
}
.mdl-button--fab.mdl-button--colored:hover {
background: #8d8d8d ;
}
#addItemButton{
position: absolute;
margin-left: 50px;
margin-top: -45px;
}
2 个解决方案
解决方案1
0 已采纳 2017-06-02 07:18:58
with jQuery , get the < input > tag's offset().top value then set document scroll position using scrollTop() 使用jQuery ，获取< input >标签的offset（）。顶部值然后使用scrollTop（）设置文档滚动位置
var $htmlOrBody = $('html, body'), // scrollTop works on <body> for some browsers, <html> for others
scrollTopPadding = 8;
$('input').focus(function() {
// get input tag's offset top position
var textareaTop = $(this).offset().top;
// scroll to the textarea
$htmlOrBody.scrollTop(textareaTop - scrollTopPadding);
// OR To add animation for smooth scrolling, use this.
//$htmlOrBody.animate({ scrollTop: textareaTop - scrollTopPadding }, 200);
});
解决方案2
0 2017-06-05 12:11:40
If found a method that works, it's not really perfect, but it works pretty good. 如果发现一种有效的方法，它并不是很完美，但它的效果非常好。 It works like this: run a function when the input is clicked that checks if the device is a phone and than add 50vh to the padding-bottom of the footer. 它的工作方式如下：单击输入时运行一个函数，检查设备是否为手机，然后将50vh添加到页脚的填充底部。 There's also an function that gets run when the input is getting blurred, this function resets the padding. 当输入变得模糊时，还有一个函数可以运行，此函数会重置填充。
The css looks like this: css看起来像这样：
footer{
position: fixed;
z-index: 700;
text-align: center;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #bdbdbd;
}
The JS (with a bit of jquery) looks like this: JS（带有一点jquery）看起来像这样：
document.querySelector(DOM.description).addEventListener('click', input);
document.querySelector(DOM.description).addEventListener('blur', uniput);
var input = function(){
if(document.querySelector(DOM.description) === document.activeElement){
console.log('focused');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
$('footer').css({'padding-bottom': '50vh'})
}
}
};
var uniput = function(){
$('footer').css({'padding-bottom': '1rem'})
}
It's not to difficult, but it took some time to find out if there was a better way to it, but this actually works really nicely. 这并不困难，但是花了一些时间来确定是否有更好的方法，但这实际上非常有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.