javascript - iPad 未在 <input> 中写入文本

Question

我在使用 <input> 时遇到了问题在 iPad 上运行我的应用程序时的字段。

在桌面上单击文本框，键入文本并单击按钮以验证输入。但是在 iPad 上，当您点击它时它会打开键盘面板，但是当您键入时文本不会显示在文本框中。
为了让事情变得更奇怪，我有一个 <textarea>在应用程序的另一部分，它工作得很好。区别在于一个位于应用程序之上，另一个位于导入的 html 中。

应用的结构是这样的:

在顶部我有主要的 HTML5 页面，它导入一个包含 3 个 div 的 html 页面。每个 div 依次导入其他 html 页面。这些页面每个都有不同的内容，包括有问题的输入字段。像这样:

Main.html
    -> container.html (imported via iframe)
        -> div1 (imports page n-1 via load(url))
        -> div2 (imports page n via load(url))
        -> div3 (imports page n+1 via load(url))

pageN.html
    -> contains the <input> field

<textarea> 的代码坐在主html上是这样的:

<form id="formNotes">
    <textarea id="mainTextbox" type="text" onKeyUp="RefreshNote()" onChange="RefreshNote()"></textarea>
</form>

<input> 的代码导入的 html 页面中的字段是这样的:

input{
    -webkit-user-select: auto;
}

<form id="formInput">
    <input id="text1" type="text" ontouchstart="OpenKeyboard(this)" onKeyDown="WriteText(this)" onKeyUp="WriteText(this)" onChange="WriteText(this)"></input>
</form>

关于在导入的 HTML 上使用事件，我了解到的一件事是您需要使用 ontouchstart 和其他函数来调用点击函数。但在这种情况下，我可以让 iPad 打开键盘，所以我不知道为什么它不能识别键盘按键上的点击，或者为什么它不能将值发送到文本框中。

[编辑:]我发现我没有收到任何文字的原因是因为 iPad 认为 <input>字段不存在(它在警报中显示为空白，而不是 [object Object] 或 [object HTMLInputElement] )。我不知道为什么。

[编辑 2:] 我尝试使用 getElementsByTagName和 getElementsByClassName而不是 getElementById .有了它，它似乎认识到了 <input> , 但我仍然无法达到该值。

Answer 1

我在构建 PhoneGap 应用程序时遇到了同样的问题。不确定是否是同一个问题:

罪魁祸首是 -webkit-user-select: none;。

Here's the demo.

我原以为禁用用户选择只会阻止各种工具(如放大镜或复制粘贴按钮)出现，但事实证明这完全禁用了输入。点击输入字段时会出现键盘 - 但仅此而已:您输入的任何内容都不会显示在输入字段中。

删除 -webkit-user-select: none; 或至少更有选择性地应用它可以达到目的。

直到现在我正在写这个答案，谷歌终于提供了。这是 another answer on SO ;)