IPad не пишет текст в <input>

У меня возникают проблемы с полем <input> при запуске моего приложения на iPad.

На рабочем столе щелкните текстовое поле, введите текст и нажмите кнопку, чтобы подтвердить ввод. Однако на iPad открывается клавиатура, когда вы нажимаете на нее, но текст не отображается в текстовом поле при вводе.
Чтобы сделать вещи еще более странными, у меня есть <textarea> в другом разделе приложения, и он отлично работает. Разница заключается в том, что один сидит поверх приложения, а другой - в импортированном html.

Структура приложения такова:

Наверху у меня есть основная страница HTML5, которая импортирует html-страницу, содержащую 3 div. Каждый 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

Код для <textarea>, сидящего на главном html, выглядит следующим образом:

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

И код для поля <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>

Одна вещь, которую я узнал об использовании событий для импортированных HTML, но вам нужно было использовать ontouchstart и другие, чтобы вызвать функции щелчка. Но в этом случае я могу заставить iPad открыть клавиатуру, поэтому я не знаю, почему она не распознает щелчок на клавишах клавиатуры или почему она не отправляет значение в текстовое поле.

[EDIT:] Я выяснил причину, по которой я не получаю никакого текста, потому что iPad считает, что поле <input> не существует (оно отображается пустым в предупреждении, а не [object Object] или [object HTMLInputElement]). Я даже не знаю, почему.

[EDIT 2:] Я попытался использовать getElementsByTagName и getElementsByClassName вместо getElementById. При этом он распознает <input>, но я до сих пор не могу достичь значения.

Ответ 1

Это не реальное решение проблемы, а довольно "грубое" решение проблемы.

По какой-то причине клавиатура в 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;
}

Это решение работает только для буквенно-цифровых символов. Если я хочу использовать специальные символы, мне нужно добавить кейс коммутатора для каждого отдельного key code (charCode, работающего на iPad, но он вел себя странно в настольных браузерах).

Ответ 2

У меня была такая же проблема при создании приложения PhoneGap. Не уверен, что это та же проблема, хотя:

Виновным был -webkit-user-select: none; ,

Здесь демо.

Я бы подумал, что отключение выбора пользователя просто предотвращает появление различных инструментов, таких как увеличительное стекло или кнопки копирования и вставки, но оказывается, что это полностью отключает ввод. Клавиатура появляется при нажатии на поле ввода - но это о нем: ничего, что вы вводите, не будет отображаться в поле ввода.

Удаление -webkit-user-select: none; или, по крайней мере, применяя его более избирательно, получилось.

И только теперь, когда я пишу этот ответ, Google наконец-то доставляет. Вот еще один ответ на ТАК ;)

Ответ 3

Когда вы динамически создаете вход или загружаете html после вызова document.ready, функция jQuery .live() - это билет.

Итак, в то время как обычно у вас будет такая функция:

$(function () {

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

станет:

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

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

Ответ 4

Еще одно грубое обходное решение (для всех символов):

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

Ответ 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;  
}