软键盘不会在 iPhone 上向上推元素
[英]soft keyboard does not push elements up on iPhone
问题描述
I have a posting form in my web app.
我的网络应用程序中有一个发布表单。 On Android phone, When the contenteditable div is focused the soft keyboard pushes every other html elements up so it is good.在 Android 手机上，当 contenteditable div 聚焦时，软键盘会将所有其他 html 元素向上推，因此很好。 However, on iPhone it does not do the same, but the keyboard just covers every other elements that are positioned in the bottom half of the screen.然而，在 iPhone 上它不会做同样的事情，但键盘只是覆盖了位于屏幕下半部分的所有其他元素。 I built the page with vue.js and the code is as below:我用 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
I also encounter this issue on iphoneX (XR) Chrome, and may webpage work fine in iphone7,8.我在 iphoneX (XR) Chrome 上也遇到了这个问题，可能网页在 iphone7,8 中可以正常工作。
Both ios-Chrome are up-to-date version of Chrome.两个 ios-Chrome 都是 Chrome 的最新版本。
It is troublesome!很麻烦！
Also looking for solution.也在寻找解决方案。
解决方案2
0 2019-02-07 17:09:04
You can observe this on any site using Chrome iOS (including www.google.com), a recent version of Chrome iOS introduced this bug where the keyboard won't push up the page content.您可以在任何使用 Chrome iOS 的网站（包括 www.google.com）上观察到这一点，最新版本的 Chrome iOS 引入了这个错误，即键盘不会推送页面内容。
There is also a chromium bug open here: https://bugs.chromium.org/p/chromium/issues/detail?id=916806这里还有一个铬错误打开： https : //bugs.chromium.org/p/chromium/issues/detail?id=916806
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.