Ręczne wyzwalanie klawiatury iPhone'a/iPada/iPoda z JavaScript

Question

Opracowuję edytor kodu HTML za pomocą prostych zdarzeń DIV i przechwytywania. Kiedy używam tego na iPadzie, klawiatura nigdy się nie wyskakuje, ponieważ technicznie nie jestem w edytowalnym polu.

Czy istnieje sposób, aby programowo powiedzieć iPadzie, że potrzebuję zestawu kluczy?

Answer 1

Odpowiedzi na te pytania sugerują, że nie jest możliwe: Why doesn't @contenteditable work on the iPhone?

Kolega, który pracuje nad podobnym projektem skończył przy użyciu textarea dla wersji iPad swojego edytora, a contenteditable div/przęseł dla przeglądarki obsługujące contenteditable. Być może coś podobnego będzie działać dla ciebie.

Answer 2

Znalazłem, że wywołanie prompt("Enter some value") powoduje wyzwolenie klawiatury na moim iPadzie 2. Nie jestem pewien, czy jest to pomocne w twojej sytuacji, czy nie.

Answer 3

Jeśli twój kod zostanie wykonany za pośrednictwem czegoś, co zostało zainicjowane przez działanie użytkownika, to zadziała.

E.g;

to działa (wyskakuje klawiatura):

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div> 

to nie zadziała (wejście dostaje granicy, ale nie pop klawiatura):

<input type='text' id='foo'> 
<script> 
    window.onload = function() { 
    $("#foo").focus(); 
    } 
</script> 

Answer 4

Oto rozwiązanie dla Ciebie:

<input id="my-input" type="text" /> 

<script type="text/javascript"> 
    var textbox = document.getElementById('my-input'); 
    textbox.select(); 
</script> 

Answer 5

Umieść przezroczysty tekst na elemencie contentEditable div. Klawiatura zostanie otwarta, gdy tylko użytkownik ustawi ostrość na obszarze tekstowym.

Zarejestruj numer event listener w polu tekstowym dla zdarzenia focus i ustaw tekst visibility w polu tekstowym na hidden. Zapobiega to migotaniu kursora.

Ustaw visibility tekstu na powrót do visible po wystąpieniu zdarzenia blur.

Zarejestruj dodatkowe detektory zdarzeń dla keydown, keyup, keypress zdarzeń i przetwarzaj te zdarzenia w taki sam sposób, jak je przetwarzasz w div div contentEditable.

Answer 6

Aby klawiatura była wyświetlana na urządzeniach z systemem iOS, należy ustawić ostrość na edytowalnym elemencie, takim jak input lub textarea. Ponadto element musi być widoczny, aby funkcja była wykonywana w odpowiedzi na interakcję użytkownika, na przykład kliknięcie myszą.

Chodzi o to, że NIE chcemy, aby element wejściowy był widoczny. Miałem z tym trochę czasu, aby uzyskać spokój i ostatecznie osiągnąłem rezultat, którego szukałem.

Najpierw należy utworzyć element, który chcesz użyć, aby pokazać klawiaturę - w tym przypadku przycisk, a ukryty element input: (Working jsFiddle lub Test on a mobile device)

<button id="openKeyboard">Open Keyboard</button> 
<input id="hiddenInput" style="visibility: hidden;"> 

następnie wykorzystać następujący skrypt:

document.getElementById('openKeyboard').addEventListener('click', function(){ 
    var inputElement = document.getElementById('hiddenInput'); 
    inputElement.style.visibility = 'visible'; // unhide the input 
    inputElement.focus(); // focus on it so keyboard pops 
    inputElement.style.visibility = 'hidden'; // hide it again 
}); 

Uwagi:

1. zauważyłem, że iOS Safari automatycznie przewijaj i przybliżaj obszar wprowadzania danych, więc upewnij się, że korzystasz z odpowiedniego widoku i umieść element wejściowy w odpowiednim miejscu.
2. Możesz użyć niektórych CSS na swoim wejściu, jak na przykład ustawienie opacity, height i width do 0. Jeśli jednak twoje dane wejściowe są całkowicie ukryte, to nie będzie działać ponownie, więc upewnij się, że zostawisz urządzenie padding lub border tylko po to, aby coś było renderowane (nawet jeśli nie pojawi się z powodu nieprzezroczystości). Oznacza to również, że nie należy używać display:none, aby go ukryć, ukryte elementy nie mogą być skupione.
3. Użyj zwykłych zdarzeń klawiatury (keydown, keypress, keyup) na ukrytym wejściu, aby uzyskać dostęp do interakcji użytkownika, tak jak robisz to normalnie. Nic specjalnego tutaj.