javascript – HTML5移动键盘以全屏模式覆盖输入

使用Chrome浏览器行为在 Android上使用移动html5应用程序很好但是一旦添加到主屏幕并在全屏模式下使用我遇到了以下问题：

当按下位于页脚中的文本输入时,页面不会向上移动 – 键盘会覆盖它,因此您无法看到正在键入的内容.

我需要它来推动页面正常,就像在浏览器模式下查看一样

这就是我在标题中的内容：

<Meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

和底部的页脚：

<div class="footer pos-fixed">
<div class="container">
    <div class="container">
        <form class="form-inline" role="form" id="ajax-message" method="post" action="blabla">

                    <input name="conversation_id" value="1" type="hidden">
                    <input name="receipient_id" value="14" type="hidden">

                <div class="marg-10">
                        <textarea style="" class="text-input-Box" name="message" rows="1"></textarea>

                <button class="btn btn-primary btn-sm pull-right" type="submit"><i class="fa fa-check"></i> Send</button>
                </div>


                <input name="_token" value="xx" type="hidden">
        </form>
    </div>
</div>

ps：我也在使用最新的bootsrap& jQuery的

解决方法

老帖子,但对于任何需要解决方案的人 – 这是我的个人方法……

HTML

<form>
 <input type="email" id="inputEmail">
 <input type="password" id="inputPassword">
</form>

JavaScript的

var deviceIsAndroid = /(android)/i.test(navigator.userAgent);

$(document).ready(function () {
    if (deviceIsAndroid) {
        $(document).bind("click",function () {
            if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') {
                var textBox = document.activeElement.id;
                document.getElementById(textBox).scrollIntoView();
            }
        });
    }
});

第一部分使其特定于Android(如果应用程序恰好可以在其他设备上访问).
任何单击都会触发该函数,但除非它出现在textArea或input字段中,否则不会发生任何事情.
如果您只使用输入字段,这可以简化…

$("input").bind("click",function () {
    var textBox = document.activeElement.id;
    document.getElementById(textBox).scrollIntoView();
});

javascript – HTML5移动键盘以全屏模式覆盖输入

解决方法

猜你在找的JavaScript相关文章