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

Question

我正在使用Cordova，Ionic v1和AngularJS 1.5进行项目。 cordova-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;
}

Answer 1

您可以执行以下操作来克服该问题

使用键盘插件，并在打开和关闭键盘时更改bottom的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");
}