软键盘不会在 iPhone 上向上推元素
[英]soft keyboard does not push elements up on iPhone
问题描述
我的网络应用程序中有一个发布表单。 在 Android 手机上，当 contenteditable div 聚焦时，软键盘会将所有其他 html 元素向上推，因此很好。 然而，在 iPhone 上它不会做同样的事情，但键盘只是覆盖了位于屏幕下半部分的所有其他元素。 我用 vue.js 构建了页面，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no"> <base href="/"> <title>iyf</title> <style>html { scroll-behavior: smooth }</style> </head> <body> <main class="posting"> <div class="creatingPost"> <div class="nav"> <button class="cancel">cancel</button> <p class="title">create</p> <button class="confirm">done</button> </div> <div class="contents"> <div class="text" contenteditable="true"></div> </div> <div class="wrapper"> <div class="previews"> <div class="photos"> </div> <div class="location"> </div> </div> <div class="nav"> <div class="inclusions"> <input type="file"/> <div class="upload-icon-photo" ></div> <div class="upload-icon-video"></div> <div class="upload-icon-location"></div> </div> </div> </div> </div> </main> </body> </html>
2 个解决方案
解决方案1
0 2019-02-01 11:26:58
我在 iphoneX (XR) Chrome 上也遇到了这个问题，可能网页在 iphone7,8 中可以正常工作。
两个 ios-Chrome 都是 Chrome 的最新版本。
很麻烦！
也在寻找解决方案。
解决方案2
0 2019-02-07 17:09:04
您可以在任何使用 Chrome iOS 的网站（包括 www.google.com）上观察到这一点，最新版本的 Chrome iOS 引入了这个错误，即键盘不会推送页面内容。
这里还有一个铬错误打开： https : //bugs.chromium.org/p/chromium/issues/detail?id=916806
为什么键盘将焦点放在隐藏按钮上会推动 HTML 顶部的 div 和框标题？
[英]Why does keyboard tabbing the focus on the hidden buttons push up the div on top in the HTML and the box title?
当出现软键盘时，如何保持Android Webview中的固定页脚不覆盖输入字段？
[英]How to keep fixed footer in Android webview from covering input field when soft keyboard comes up?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.