文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使元素在android (HTML 5应用程序)上用键盘向上移动

问如何使元素在android (HTML 5应用程序)上用键盘向上移动
EN

Stack Overflow用户

提问于 2017-06-02 06:36:31

回答 2查看 4.6K关注 0票数 2

我想让我固定到屏幕底部的文本字段和键盘一起向上移动，基本上是把它粘在键盘上。当键盘弹出时，这就是没有键盘的情况，我想用键盘向上移动的元素是页脚。现在会弹出输入字段，所以您无法看到您输入的内容。我怎么才能解决这个问题？非常感谢！

此部分的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>

和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;
}

css

android

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-02 07:18:58

使用jQuery，获取<input>标记的偏移量().top值，然后使用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);

});

票数 0

Stack Overflow用户

发布于 2017-06-05 12:11:40

如果找到一种有效的方法，它并不是真正完美的，但它的工作非常好。它的工作方式如下:单击输入时运行一个函数，检查设备是否是手机，并将50 of添加到页脚的填充底部。还有一个函数在输入变得模糊时运行，这个函数重置填充。

css如下所示：

footer{
    position: fixed;
    z-index: 700;
    text-align: center;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #bdbdbd;
}

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'})
    }

这并不难，但它需要一些时间来找出是否有更好的方法，但实际上这是很好的工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44322343

复制

相似问题

问如何使元素在android (HTML 5应用程序)上用键盘向上移动
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使元素在android (HTML 5应用程序)上用键盘向上移动EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使元素在android (HTML 5应用程序)上用键盘向上移动
EN