ソフトキーボードがphonegapに表示されると、入力フィールドが非表示になります
Phonegap 3.6.3 for AndroidおよびiOSを使用してモバイルアプリケーションを作成します。iOSは希望どおりに動作するため、問題はAndroidのみにあります。
入力テキストフィールドまたはテキストエリアをクリックすると、ソフトキーボードが表示されます。それは時々これらの要素をカバーします。
ページはiScroll内、右下、および別の絶対配置されたdiv内に配置されるため、画面が表示されたら、これらのいずれにもスクロールできません。キーボードが表示されたら、Webビューを小さくする必要があると思います。しかし、多くのことを試した後、それは機能していません。
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" />
そして、「Webページの先頭」の行を次のように変更します。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
私も同じ問題を抱えていました-根本的な問題は、cordovaビルドでandroidManifestファイルを編集できないことです。 config.xmlファイルを編集するだけで、実際には限られた設定のサブセットしか変更できません。私が欲しいのは、windowSoftInputModeを変更できるようにすることです。
私は自分の問題の解決策を見つけました。これは、画面下部のフィールドに表示されるキーボードでした。これは、同じ問題だと思います。コルドバ2.9.0とコルドバ3.6.0を使用しました
解決策1：私が見つけた解決策は、config.xmlでこの設定を変更することでした。
<preference name="fullscreen" value="false" />
これは、その設定が「true」ではなく「false」に設定されている場合に行われます。ページが上にスクロールして、キーボードが開いたときに編集しているフィールドが表示されるようになりました。 （より正確に言うと、上にスクロールするのではなく、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キーボードプラグイン を使用してこのコードを実装することでした：
HTML：
<div id="page" class="page-content">
...
</div>
CSS：
.page-content {
height: 100%;
overflow: auto;}
Javascript：
キーボードが開いているとき
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);
より良いユーザーエクスペリエンスを提供するには、すべての入力にこのコードを追加します
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);
Esta funciona muybien。
config.xml
プラグイン名= "com.ionic-for-phonegap.keyboard" spec = "0.0.1" source = "pgb"
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);
}入力に自動的にスクロールして表示する最も効率的なソリューションがあります。まず、@ Fedirで説明されているように、キーボードプラグイン（cordovaプラグインadd com.ionic.keyboard）を追加する必要があります。次に、「keyboardshow」イベントのイベントハンドラーに次のコードを追加します。
window.addEventListener('native.keyboardshow', function(e){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 100);
});
追伸：これはAndroid（Chrome）とSafariでのみサポートされています。：D
私のフルスクリーンアプリで機能した唯一の解決策は、Cordovaアプリケーションに追加することです ionic-plugin-keyboard プラグイン
cordova plugin add com.ionic.keyboard
JSコード：
// 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");
}
その後、CSSでビューを調整できます。
私のアプリはAndroidフルスクリーン/イマーシブモードを使用しています。キーボードが表示/非表示になったらすぐにモードを切り替えることで、これを解決しました。
Cordova-plugin-fullscreenプラグインとionic-plugin-keyboardプラグインをインストールし、次のコードを追加しました。
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);
});
コードは Framework7 とjQueryに非常によく似たそのDom7ライブラリを利用します。スクロール可能な要素は.page-contentであると想定していますが、それに応じて調整できます。
Android-windowSoftInputModeプリファレンスはデフォルト値のままにしておく必要があります。