javascript - tag - HTML Mobile: obliga al teclado virtual a ocultarse

title html w3schools

Question

Estoy desarrollando el sitio de front-end para una empresa de cupones, y tengo una página donde el usuario solo necesita ingresar el número de teléfono y $$ gastado. Se nos ocurrió un divertido teclado en pantalla creado en Javascript, que es fácil de usar y rápido. Sin embargo, estoy buscando una solución para evitar que el teclado virtual aparezca cuando el usuario enfoca e ingresa texto / números en esos campos.

Sé sobre los atributos de tipo "número / teléfono / correo electrónico" que HTML5 creó. Sin embargo, a riesgo de parecer loco, realmente quiero usar mi teclado en pantalla.

Nota: este sitio web está principalmente dirigido a tabletas.

Gracias.

Answer 1

Dado que el teclado virtual es parte del sistema operativo, la mayoría de las veces no podrá ocultarlo; también, en iOS, al ocultar el teclado se deja de enfocar desde el elemento.

Sin embargo, si usa el atributo onFocus en la entrada y luego blur() la entrada de texto inmediatamente, el teclado se ocultará y el evento onFocus puede establecer una variable para definir qué entrada de texto se enfocó al final.

A continuación, modifique el teclado de la página para que solo modifique la entrada de texto enfocada por última vez (verifique mediante la variable), en lugar de simular presionar una tecla.

Answer 2

Esas respuestas no son malas, pero están limitadas porque no te permiten ingresar datos. Tuvimos un problema similar cuando utilizamos lectores de códigos de barras para ingresar datos en un campo, pero queríamos suprimir el teclado.

Esto es lo que armé, funciona bastante bien:

https://codepen.io/bobjase/pen/QrQQvd/

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();

  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);

  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));

});

Cuando hace clic en el cuadro <input> , simula un cursor en ese cuadro, pero realmente enfoca un cuadro <select> vacío. Los cuadros de selección permiten naturalmente que las teclas presionen para saltar a un elemento de la lista, por lo que solo era cuestión de cambiar el trazado de la tecla a la entrada original y compensar el cursor simulado.

Esto no funcionará para el retroceso, eliminación, etc., pero no los necesitamos. Probablemente puedas usar el activador de jQuery para enviar el evento del teclado directamente a otro cuadro de entrada en algún lugar, pero no necesitamos molestarnos con eso, así que no lo hice.

Answer 3

La respuesta de Scott S funcionó a la perfección.

Estaba codificando un teclado de teléfono para móvil basado en la web, y cada vez que el usuario presionó un número en el teclado (compuesto por elementos de td span en una tabla), el teclado virtual aparecía. También quería que el usuario no pudiera acceder al cuadro de entrada del número que se está marcando. Esto realmente resolvió ambos problemas en 1 disparo. Se usó lo siguiente:

<input type="text" id="phone-number" onfocus="blur();" />

Answer 4

Para más lectores / buscadores:

Como señala Rene Pot en este tema ,

Al configurar el campo de entrada en readonly="true" , debe evitar que alguien escriba nada en él, pero aún así pueda iniciar un evento de clic en él.

Con este método, puede evitar mostrar el teclado "suave" y aún lanzar eventos de clic / completar la entrada con cualquier teclado en pantalla.

Esta solución también funciona bien con los recolectores de fecha y hora que generalmente ya implementan controles.

Answer 5

ejemplo, cómo lo hice, después de que llene una longitud máxima, se borrará de mi campo (y el teclado desaparecerá), si tiene más de un campo, puede agregar la línea que agrego ''//''

var MaxLength = 8;
    $(document).ready(function () {
        $(''#MyTB'').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $(''#MyTB'').blur();
             //  $(''#MyTB2'').focus();
         }
          }); });