iPad is not writing text in the <input>

Question

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.

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

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