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和其他来调用click函数.但在这种情况下,我可以让iPad打开键盘,所以我不知道为什么它没有识别键盘键上的点击,或者为什么它没有将值发送到文本框中.

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

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

Answer 1

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

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

这是演示.

我原本以为禁用用户选择只会阻止放大镜或copy'n'paste按钮等各种工具出现,但事实证明这完全禁用了输入.点击输入字段时会显示键盘 - 但这就是它:输入字段中显示的任何内容都不会显示.

删除-webkit-user-select: none;或至少有选择地应用它可以解决问题.

直到现在我正在写这个答案谷歌终于提供了.这是关于SO的另一个答案 ;)

Answer 2

这不是问题的实际解决方案，而是相当“粗糙”的解决方法。

由于某种原因，iPad 中的键盘没有将值发送到 中<input>，尽管它正在触发按键事件。因此，我被迫捕获这些值，将它们写下来，然后将完整的字符串发送到文本框中。换句话说，执行键盘一开始就应该自动执行的相同工作！

// Text container
temp = "";

document.addEventListener('keydown', function(event) {

    // Checks if the key isn't the delete
    if(event.keyCode != 8){

       // Converts and writes the pressed key
       temp += String.fromCharCode(event.keyCode);
    }
    else{
       // Deletes the last character
       temp = temp.slice(0, temp.length-1);
    }
}

document.addEventListener('keyup', function(event) {

    // Writes the text in the text box
    document.getElementById("text1").value = temp;
}

然而，该解决方案仅适用于字母数字字符。如果我想使用特殊字符，我需要为每个单独的键代码添加一个开关盒（charCode在 iPad 上有效，但在桌面浏览器上表现得很奇怪）。