iPad is not writing text in the <input>

问题:

I'm having trouble with the <input> field when running my application on 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.

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:

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:

<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{
    -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.

[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.

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

回答1:

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

The culprit was -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.

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

回答2:

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

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);
})

回答3:

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!

// 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 (charCode worked on iPad, but it behaved weirdly on desktop browsers).

回答4:

Another crude workaround (for all characters):

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