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

Вы можете сделать что-то подобное, чтобы преодолеть проблему

Использовать плагин клавиатуры, а при открытии и закрытии клавиатуры изменять значение css в bottom, поэтому при открытии клавиатуры он автоматически перемещает плавающую кнопку вверх и при закрытииперейти вниз

плагин Cordova добавить Cordova-плагин-ионная клавиатура - сохранить

//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");
}