Safari手机文本输入问题

Safari mobile text input issues

本文关键字：问题 输入 文本 手机 Safari      更新时间：2023-09-26

此问题发生在我的iPhone 6 plus上。我的iphone5C上没有出现此问题

在我的一个页面上，我有一个覆盖div，它有一个固定的位置，当按下按钮时会显示出来，在这个div上有一些输入。overlaydiv是可滚动的，可以适应所有的输入。当输入所述输入时，会发生一些奇怪的事情。

  • 键入时，每次按键时，覆盖div都会向上"浮动"。页面没有滚动，div只是向上移动。这几乎就像我在一个文本字段上按回车键，它会跳到一行。按下done后，div返回到正确的位置，并且输入中的文本是正确的。

  • EDIT-通过将HTML和Body标记都设置为溢出来修复此问题：单击显示div的按钮时隐藏。我会把这个问题留到一边，以防其他人遇到这个问题当我点击其中一个输入，Safari放大/聚焦它时，有时div会消失，基本上它只是变得透明。经过研究，div（它是固定的）一直下降到页面的底部，而页面实际上并没有滚动，这就是为什么它看起来像是消失了。当我按下"完成"时，它再次出现在顶部。

这些都不会发生在桌面/"完整"版本或移动chrome上。

这是一个已知的问题吗？我有一个问题，导致背景滚动，但没有div，直到我添加了这个

 -webkit-overflow-scrolling: touch;

这是表单，数据绑定用于knockout.js

<label class = "overlay_div_label" for ="name">Name</label>
<input type = "text" class = "overlay_div_input" data-bind = "value: name"/>
<label class = "overlay_div_label" for ="email">email</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: email"/>
<label class = "overlay_div_label" for ="city">City</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: city"/>
<label class = "overlay_div_label" for ="contactTime">Contact Time</label>
    <input type = "text" class = "overlay_div_input" data-bind = "value: contactTime"/>

我遇到了同样的问题。当有人在输入中输入时，该输入周围的所有div和inpust都会消失。我的解决方案是添加位置：相对；到表单标记。

检查您的所有CSS，并确保不包含任何这些标签/技巧

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

但如果你的问题持续存在，试着改变。

-webkit-overflow-scrolling: auto;

或者可以为div元素指定z-index。

我希望我能帮上忙。

相关文章：