iPad没有在<input />中写入文字

Question

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

在桌面上，单击文本框，键入文本，然后单击按钮以验证输入。然而，在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

主html上<textarea>的代码如下：

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

导入的html页面中<input>字段的代码如下：

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>字段不存在（它在警报中显示为空白，而不是{{ 1}}或[object Object]）。我不知道为什么。

[编辑2：]我尝试使用[object HTMLInputElement]和getElementsByTagName代替getElementsByClassName。有了它，它似乎识别getElementById，但我仍然无法达到价值。

Answer 1

构建PhoneGap应用时遇到了同样的问题。不确定它是否是同一个问题：

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

Here's the demo.

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

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

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

Answer 2

在document.ready调用后动态创建输入或加载html时，jQuery .live()函数就是故障单。

所以通常你会有这样的函数：

$(function () {

    $('#text1').on('keyup', function() {
        // do something
    })
})

会变成：

function doSomething() {
    // do something
}
$(function () {

    $('#text1').live('keyup', doSomething);
})

Answer 3

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

出于某种原因，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;
}

此解决方案仅适用于字母数字字符。如果我想使用特殊字符，我需要为每个单独的密钥代码添加一个switch case（charCode在iPad上工作，但它在桌面浏览器上表现得很奇怪。）

Answer 4

另一种粗略的解决方法（适用于所有角色）：

document.addEventListener('keydown', function(e) {
  window.focus()
  $(':focus').focus()
});

Answer 5

我必须将!important添加到user-select: auto

input {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    -o-user-select: auto !important;
    user-select: auto !important;  
}