iOS Cordova Safari - 键盘使浮动按钮消失

【问题标题】：iOS Cordova Safari - keyboard makes floating button dissapeariOS Cordova Safari - 键盘使浮动按钮消失
【发布时间】：2019-10-29 01:03:40
【问题描述】：

我正在使用 Cordova、Ionic v1 和 AngularJS 1.5 开发一个项目。科尔多瓦-ios v 5

我的项目中有一个浮动按钮。它适用于一切，除非我有一个带有文本输入的表单页面。当 iOS 键盘出现时，我的浮动按钮消失。它在 Android 上运行良好。

这是我的 CSS：

.floating-button {
    position: fixed;
    bottom:  20px;
    z-index: 9999;
    right:  20px;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    border: none;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 22px;
}

【问题讨论】：

标签： ios css iphone cordova ionic-framework

【解决方案1】：

你可以这样做来解决这个问题

使用键盘插件并在键盘打开和关闭时更改底部的css值，因此在键盘打开时它会自动将浮动按钮向上移动并在关闭时向下移动

cordova 插件添加 cordova-plugin-ionic-keyboard --save

//Keyboard will be shown

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    console.log('Keyboard height is: ' + e.keyboardHeight);
    $(".floating-button").css("bottom", e.keyboardHeight+"px"); 
    // You can use IONIC properties for this and change value as per your requierment
}

//Keyboard will hide

window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $(".floating-button").css("bottom", "20px");
}

【讨论】：