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

iPad is not writing text in the <input>

提问by Catpixels

I'm having trouble with the <input>field when running my application on iPad.

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

On the desktop you click on the text box, type the text in and click on a button to validate the input. On iPad however it opens the keyboard panel when you click on it, but the text doesn't show in the text box when you type.
To make things even weirder, I have a <textarea>in another section of the application and it works perfectly. The difference is one is sitting on top of the application and the other is in an imported html.

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

The structure of the application is like this:

应用程序的结构是这样的：

On the top I have the main HTML5 page, which imports a html page that contains 3 divs. Each div in turn imports other html pages. And those pages have a different content each, including the problematic input field. Something like this:

在顶部，我有主 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

The code for the <textarea>sitting on the main html is like this:

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

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

And the code for the <input>field inside the imported html page is like this:

而<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>

One thing I've learned about using events on imported HTMLs though was you need to use ontouchstart and others to call the click functions. But in this case I can get the iPad to open the keyboard, so I don't know why it's not recognizing the click on the keyboard keys, or why it's not sending the value into the text box.

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

[EDIT:] I found out the reason why I'm not getting any text written is because the iPad thinks the <input>field doesn't exist (it shows up blank in the alert, instead of [object Object]or [object HTMLInputElement]). I have no idea why though.

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

[EDIT 2:] I tried to use getElementsByTagNameand getElementsByClassNameinstead of getElementById. With that it seems to recognize the <input>, but I still can't reach the value.

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

采纳答案by Catpixels

This is not an actual solution to the problem, but a rather "crude" workaround.

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

For some reason the keyboard in the iPad isn't sending the values into the <input>, although it's firing the key events. So I was forced to capture the values, write them down and then send the full string into the text box. In other words, do the same work the keyboard should do automatically to begin with!

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

This solution only works for alphanumeric characters however. If I want to use special characters I need to add a switch case for each individual key code (charCodeworked on iPad, but it behaved weirdly on desktop browsers).

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

回答by robro

I had the same problem while building a PhoneGap app. Not sure whether it's the same issue though:

我在构建 PhoneGap 应用程序时遇到了同样的问题。不知道这是否是同样的问题：

The culprit was -webkit-user-select: none;.

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

Here's the demo.

这是演示。

I would have thought disabling user-select simply prevents various tools like the magnifying glass or copy'n'paste buttons to show up, but it turns out this completely disables the input. The keyboard shows up when tapping on the input field — but that's about it: nothing you type will show up in the input field.

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

Removing -webkit-user-select: none;or at least applying it more selectively did the trick.

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

And only now that I'm writing this answer google finallydelivers. Here's another answer on SO;)

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

回答by inorganik

When you dynamically create an input or load html after the document.readycall, the jQuery .live()function is the ticket.

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

So whereas normally you would have a function like this:

因此，通常您会有这样的功能：

$(function () {

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

would become:

会成为：

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

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

回答by jusu

Another crude workaround (for all characters):

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

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

回答by Gapur

I had to add !importantto user-select: auto

我不得不添加!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;  
}