文章/答案/技术大牛

发布

社区首页 >问答首页 >iOS Cordova Safari -键盘让浮动按钮消失

问iOS Cordova Safari -键盘让浮动按钮消失
EN

Stack Overflow用户

提问于 2019-06-14 19:36:14

回答 1查看 83关注 0票数 0

我正在与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;
}

ios

css

iphone

cordova

ionic-framework

回答 1

Stack Overflow用户

发布于 2019-06-14 21:16:16

您可以这样做来克服这个问题。

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

cordova插件添加cordova- plugin -ionic keyboard--保存

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56597375

复制

相似问题

问iOS Cordova Safari -键盘让浮动按钮消失
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS Cordova Safari -键盘让浮动按钮消失EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS Cordova Safari -键盘让浮动按钮消失
EN