iPad nie pisze tekstu w polu <input>

Question

Mam problem z polem <input> podczas uruchamiania aplikacji na iPadzie.

Na pulpicie, kliknij pole tekstowe, wpisz tekst i kliknij przycisk, aby potwierdzić wprowadzone dane. Na iPadzie jednak otwiera się panel klawiatury po kliknięciu, ale tekst nie pojawia się w polu tekstowym podczas pisania.
Aby było jeszcze głośniej, mam <textarea> w innej sekcji aplikacji i działa idealnie. Różnica polega na tym, że siedzi się na górze aplikacji, a druga jest w importowanym html.

Struktura aplikacji jest tak:

Na górze mam główną stronę HTML5, który importuje stronę html, który zawiera 3 DIV. Każdy div z kolei importuje inne strony html. Każda z tych stron ma inną treść, w tym problematyczne pole tekstowe. coś takiego:

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 

Kod dla <textarea> siedzi na głównej html jest tak:

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

I kod do pola wewnątrz importowanej strony html <input> jest tak:

Jedną z rzeczy, których nauczyłem się używać zdarzeń na importowanych kodach HTML, chociaż trzeba było użyć ontouchstart i innych do zadzwoń do funkcji kliknięcia. Ale w tym przypadku mogę dostać iPada, aby otworzyć klawiaturę, więc nie wiem, dlaczego nie rozpoznaje kliknięcia klawiszy klawiatury lub dlaczego nie wysyła wartości do pola tekstowego.

[EDIT:] I okazało się, dlaczego ja nie otrzymuję żadnych tekst napisany jest fakt, że iPad myśli pole <input> nie istnieje (to pokazuje się pusty w pogotowiu, zamiast [object Object] lub [object HTMLInputElement]). Nie mam pojęcia dlaczego.

[EDIT 2:] Próbowałem użyć getElementsByTagName i getElementsByClassName zamiast getElementById. Dzięki temu wydaje się rozpoznawać <input>, ale nadal nie mogę osiągnąć wartości.

Answer 1

To nie jest rzeczywiste rozwiązanie problemu, ale raczej „surowe” obejście.

Z jakiegoś powodu klawiatura na iPadzie nie wysyła wartości do <input>, chociaż uruchamia kluczowe zdarzenia. Musiałem więc uchwycić wartości, zapisać je, a następnie wysłać cały łańcuch znaków do pola tekstowego. Innymi słowy, wykonaj te same czynności, które klawiatura powinna wykonać automatycznie na początek!

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

To rozwiązanie działa jednak tylko w przypadku znaków alfanumerycznych. Jeśli chcę używać znaków specjalnych, muszę dodać skrzynkę przełącznika dla każdego kodu klucza (charCode pracował na iPadzie, ale zachowywał się dziwnie w przeglądarkach komputerowych).

Answer 2

Podczas dynamicznego tworzenia danych wejściowych lub ładowania html po wywołaniu document.ready, funkcja jQuery .live() jest biletem.

Więc podczas gdy normalnie musiałbyś funkcję tak:

$(function() { 

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

staną:

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

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

Answer 3

Miałem ten sam problem podczas budowania aplikacji PhoneGap. Nie jestem pewien, czy to ten sam problem:

Sprawcą był -webkit-user-select: none;.

Here's the demo.

myślałem wyłączenie przez użytkownika wybierz po prostu zapobiega różnych narzędzi, takich jak szkło powiększające lub przycisków copy'n'paste aby pokazać się, ale okazuje się to całkowicie wyłącza wejście. Klawiatura pojawia się po dotknięciu pola wejściowego - ale to już wszystko: wpisane nic pojawi się w polu wejściowym.

Usunięcie -webkit-user-select: none; lub przynajmniej zastosowanie go bardziej selektywnie załatwiło sprawę.

I dopiero teraz piszę tę odpowiedź google wreszcie dostarcza. Oto another answer on SO;)

Answer 4

Innym surowy obejście (dla wszystkich znaków):

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