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

video autoplay html ios

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 manera de decirle programáticamente al iPad que necesito un Keybaord?

Answer 1

Truco de entrada Proxy

Descubrí otra solución sucia, pero funciona bien. El truco está basado en el hecho de que si el teclado ya está abierto, cambiar el foco no cerrará el teclado.

1. Agregue una pequeña "entrada proxy invisible" en la parte superior izquierda de la página con la posición fija (la posición fija evita el parpadeo, también asegúrese de que el campo tenga un tamaño de fuente mayor a 16px para evitar el zoom de la página de iOS en el foco)
2. Al hacer clic en el botón, simplemente .focus() en este campo invisible. El teclado se abrirá ...
3. Muestra o renderiza tus otros campos de entrada
4. Ahora con el teclado, abra simplemente .focus() en la entrada deseada. Puede usar un pequeño retraso de setTimeout, por ejemplo 500ms si es necesario

Answer 2

Aquí hay una solución para ti:

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

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

Answer 3

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

Registre un event listener en el área de texto para el evento de focus y establezca la visibility del área de texto como hidden . Esto evita que el cursor parpadee.

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

Registre oyentes de eventos adicionales para keydown , keyup , keypress events y procese estos eventos de la misma manera, a medida que los procesa en el contentEditable div.

Answer 4

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

Answer 5

Las respuestas a estas preguntas sugieren que no es posible: ¿por qué @contenteditable no funciona en el 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 divs / spans contenteditable para navegadores compatibles con contenteditable. Tal vez algo similar funcionaría para ti.

Answer 6

Para que el teclado se muestre en dispositivos con iOS, debe centrarse en un elemento editable, como una input o un área de textarea . Además, el elemento debe estar 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 estado jugando con esto por algún tiempo y finalmente obtuve el resultado que estaba buscando.

Primero, crea un elemento que quieras usar para mostrar el teclado, en este caso un botón, y un elemento de entrada oculto: ( Trabajando jsFiddle o Test en un dispositivo móvil )

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

Luego usa 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 safari de iOS se desplazará y acercará automáticamente al área de la entrada, así que asegúrese de usar la ventana gráfica adecuada y situar su elemento de entrada en una ubicación relevante.
2. Puede usar algo de CSS en su entrada, como establecer la opacity , height y width en 0 . Sin embargo, si tu entrada está completamente oculta, esto no funcionará nuevamente, así que asegúrate de dejar el padding o el border justo para que haya algo que mostrar (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í.

Answer 7

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

P.ej;

esto funciona (teclado emergente):

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

esto no funciona (la entrada obtiene un borde pero no aparece el teclado):

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