Activación manual del teclado de iPhone/iPad/iPod desde JavaScript

Question

Estoy desarrollando un editor de código HTML usando DIV simples y eventos de captura. Cuando uso esto en el iPad, el teclado nunca aparece porque técnicamente no estoy en un campo editable.

¿Hay alguna forma de decirle programáticamente al iPad que necesito un teclado?

Answer 1

Las respuestas a estas preguntas sugieren que no es posible: Why doesn't @contenteditable work on the iPhone?

Un colega mío que estaba trabajando en un proyecto similar terminó usando un área de texto para la versión iPad de su editor y contentEditable divs/palmos de navegadores compatibles con contenteditable. Tal vez algo similar funcionaría para ti.

Answer 2

He encontrado que llamar prompt("Enter some value") activa el teclado en mi iPad 2. No estoy seguro de si esto es útil en su caso o no.

Answer 3

Si su código se ejecuta a través de algo que se inició a través de una acción del usuario, entonces funcionará.

E.g;

esto funciona (COP teclado):

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

esto no funciona (entrada recibe una frontera, pero no pop teclado):

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

Answer 4

Aquí hay una solución para usted:

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

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

Answer 5

Coloque un área de texto transparente sobre el contentEditable div. El teclado se abrirá tan pronto como el usuario enfoque el área de texto.

Dar de alta event listener en el área de texto para el evento focus y establezca el visibility del área de texto a hidden. Esto evita que el cursor parpadee.

Establezca el visibility del área de texto de nuevo en visible después de que se haya producido el evento blur.

Registrar detectores de eventos adicionales para keydown, keyup, keypress eventos y procesarlos de la misma manera, ya que los procesa en el contentEditable div.

Answer 6

Para que el teclado se muestre en dispositivos con iOS, debe centrarse en un elemento editable como input o textarea. Además, el elemento debe ser visible y la función .focus() debe ejecutarse en respuesta a una interacción del usuario, como un clic del mouse.

Lo que pasa es que NO queremos que el elemento de entrada sea visible ... He jugueteado con esto por algún tiempo y finalmente obtuve el resultado que estaba buscando.

primer lugar, crear un elemento que desea utilizar para mostrar el teclado - en este caso, un botón, y un elemento de campo oculto: (Working jsFiddle o Test on a mobile device)

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

A continuación, utilice el siguiente javascript:

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

Notas:

1. me he dado cuenta de que el iOS Safari Desplazarse y acercarse automáticamente al área de la entrada, así que asegúrese de utilizar la ventana correspondiente y coloque su elemento de entrada en una ubicación relevante.
2. Puede usar algo de CSS en su entrada, como configurar opacity, height y width en 0. Sin embargo, si su entrada está completamente oculta, esto no funcionará nuevamente, así que asegúrese de dejar el padding o el border solo para que haya algo que renderizar (aunque no se muestre debido a la opacidad). Esto también significa que no debe usar display:none para ocultarlo, simplemente no se permite enfocar los elementos ocultos.
3. Utilice los eventos normales del teclado (keydown, keypress, keyup) en su entrada oculta para acceder a la interacción del usuario como lo haría normalmente. Nada especial aquí.