当软键盘出现在phonegap中时隐藏输入字段

Posted 2021-04-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当软键盘出现在phonegap中时隐藏输入字段相关的知识，希望对你有一定的参考价值。

使用适用于android和ios的Phonegap 3.6.3创建移动应用程序。问题仅适用于Android，因为iOS会按照我的意愿行事。

当我单击输入文本字段或textarea时，会出现一个软键盘。它有时涵盖这些元素。

这些页面放在iScroll中，位于底部，另一个是绝对放置的div，因此一旦屏幕弹出，我就无法滚动到其中任何一个。我怀疑当键盘出现时我必须将webview更改为更小。然而，在尝试了很多东西后，它无法正常工作。

config.xml中

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="false" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="false" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="13" />
    <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="splash" />

（已经为android-windowSoftInputMode尝试了许多不同的值，如下例所示）

    <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" />

网页的负责人

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

（是的，我也尝试过很多其他的东西）

您可能认为相关的任何其他内容，请告诉我。不幸的是，我不能自由地分享太多的代码，但根据我的理解，我们需要担心的是。

谢谢，

答案

从config.xml中删除此行

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

并将“网页头部”中的行更改为

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

另一答案

我也有同样的问题 - 看起来潜在的问题是你不能用cordova Build编辑androidManifest文件。您所能做的就是编辑config.xml文件，它实际上只允许您更改有限的设置子集。我想要的是能够改变windowSoftInputMode。

我确实找到了解决问题的方法。这是键盘出现在屏幕底部的字段上，我认为这是你遇到的同样问题。我使用过cordova 2.9.0和cordova 3.6.0

解决方案1：我找到的解决方案是在config.xml中更改此设置

<preference name="fullscreen" value="false" />

这样做的设置设置为“false”而不是“true” - 页面现在向上滚动以显示键盘打开时正在编辑的字段。（为了更准确，我相信viewport会改变而不是向上滚动。希望你在视口部分是正确的）

解决方案2：尝试从config.xml中删除或替换此行

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

如

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>

代替。这对我来说很有用。

解决方案3：尝试将此样式添加到您的页面

<style> <item name="android:windowTranslucentStatus">true</item></style>

编辑：

如果你正在使用jQuery，你可以试试。

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) {
    e.stopPropagation();
});

另一答案

我的解决方案是使用Ionic keyboard plugin并实现此代码：

html：

<div id="page" class="page-content">
    ...         
</div>

CSS：

.page-content {    
height: 100%;
overflow: auto;}

使用javascript：

键盘打开时 qazxsw poi
键盘关闭时 window.addEventListener('native.keyboardshow', function (e) { var deviceHeight = window.innerHeight; var keyboardHeight = e.keyboardHeight; var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height });

要提供更好的用户体验，请为所有输入添加此代码

    window.addEventListener('native.keyboardhide', function (e) {
    setTimeout(function () {
        document.getElementById('page').style.height = 100 + '%';//device  100% height
    }, 100);

另一答案

这非常有效。

config.xml中

插件名称=“com.ionic-for-phonegap.keyboard”spec =“0.0.1”source =“pgb”

var inputs = document.querySelectorAll('input');//select all input
var n = inputs.length;
for (var i = 0; i < n; i++) {
    var input = inputs[i];
    input.addEventListener('focus', function (e) {//add event focus
        var inp = this; 
       //wait 0.6 seconds to scroll down to the input has focus
        setTimeout(function () {
            try {
                //if the keyboard is open
                if (cordova.plugins.Keyboard.isVisible) {
                    var padding = 15;
                    var targetPosition = parseInt($$(inp).offset().top + padding);
                    var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height   

                    //if the input is hidden by the keyboard,scroll to the input 
                    if (targetPosition >= keyboardHeight) {
                        padding *=5;
                        document.getElementById('page').scrollTop = targetPosition - padding;
                    }
                }
            } catch (ex) {
                alert(ex.message);
            }
        }, 600);
    }, true);

另一答案

我有最有效的解决方案来自动滚动输入并使其可见。首先，你需要添加@Fedir所提到的键盘插件（cordova插件添加com.ionic.keyboard）。然后在'keyboardshow'事件的事件处理程序中添加以下代码：

          window.addEventListener('native.hidekeyboard', keyboardHideHandler);
          window.addEventListener('native.showkeyboard', keyboardShowHandler);
          function keyboardHideHandler(e){
              alert('Goodnight, sweet prince');
          }
          function keyboardShowHandler(e){
              alert('Keyboard height is: ' + e.keyboardHeight);
          }

P.S：仅在Android（Chrome）和Safari上支持。：d

另一答案

只有一个解决方案适用于我的全屏应用程序，它是添加到Cordova应用程序window.addEventListener('native.keyboardshow', function(e){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); }, 100); });插件

ionic-plugin-keyboard

JS代码：

cordova plugin add com.ionic.keyboard

之后你可以用CSS调整视图。

参考：// This event fires when the keyboard will hide window.addEventListener('native.keyboardshow', keyboardShowHandler); function keyboardShowHandler(e){ $("body").addClass("keyboardOn"); } // This event fires when the keyboard will show window.addEventListener('native.keyboardhide', keyboardHideHandler); function keyboardHideHandler(e){ $("body").removeClass("keyboardOn"); }

另一答案

我的应用程序使用Android全屏/沉浸式模式。一旦键盘出现/消失，我就通过切换模式解决了这个问题。

我已经安装了cordova-plugin-fullscreen和ionic-plugin-keyboard插件并添加了以下代码：

https://stackoverflow.com/a/25823491/634275

另一答案

我正在使用document.addEventListener('deviceready', function(){ // disable immersive mode on Android when keyboard is shown try { if (cordova.platformId == 'android') { AndroidFullScreen.immersiveMode(false, false); window.addEventListener('native.keyboardshow', function (e) { AndroidFullScreen.showSystemUI(false, false); }); window.addEventListener('native.keyboardhide', function (e) { AndroidFullScreen.immersiveMode(false, false); }); } } catch (error) { console.log('deviceready - ' + error); } }, false);来检测键盘何时打开并相应地为身体添加必要的填充：

Ionic Keyboard Plugin

当事件触发时，您可以调整身体上的phonegap plugin add ionic-plugin-keyboard --save以匹配键盘的高度。

然后，为了检测聚焦元素是否可见，您必须进行数学运算并在必要时滚动容器。我使用的最终代码如下：

padding-bottom

该代码使用cordova.plugins.Keyboard.disableScroll(true); $$(window).on('native.keyboardshow', function(e) { $$('body').css('padding-bottom', e.keyboardHeight + 'px'); var el = $$('input:focus, textarea:focus'); var content = el.closest('.page-content'); var offset = el.offset().top + content.scrollTop(); /* 15 is an arbitrary value to add a bit of padding */ var safeAreaHeight = el.outerHeight(true) + 15; var maxPosition = content.height() - safeAreaHeight; if (content.scrollTop() < (offset - maxPosition)) { content.scrollTop(offset - maxPosition); } }); $$(window).on('native.keyboardhide', function(e) { $$('body').css('padding-bottom', 0); });及其与jQuery非常相似的Dom7库。它假设可滚动元素是键盘使用 iFrame/object 和 JQTouch 隐藏 PhoneGap Build 3.1 中的 iOS 输入字段

隐藏iPhone键盘上方的工具栏，PhoneGap

Cordova/Phonegap 3.1 键盘（仍然）覆盖焦点表单字段 - iOS 7

iOS - Phonegap 或 WebApp 键盘问题

当软键盘出现并且软键盘在编辑文本下方时，在布局中保持工具栏位置固定

在Android Chrome上隐藏在键盘后面的输入文本框