iPad is not writing text in the <input>

Question

I\'m having trouble with the field when running my application on iPad.

On the desktop you click on the text box, type the text in and cl

Answer 1

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

Answer 2

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

Answer 3

Another crude workaround (for all characters):

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

Answer 4

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 5

I had to add !important to 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;  
}