2012-06-07 29 views
29

Estoy desarrollando el sitio web 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.HTML Mobile -forzando el teclado virtual para ocultar

Conozco 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á dirigido principalmente a tabletas.

Gracias.

+1

This _is_ crazy. Si usa campos de entrada estándar, use los métodos de entrada estándar. – egrunin

+7

Sin embargo, hay muchos beneficios de tener un teclado en pantalla, además de que es divertido de usar y construir. Por un lado, son altamente personalizables para enfocarse de cerca en las necesidades de su audiencia, en segundo lugar, la seguridad, la tercera pantalla de bienes raíces.;-) – crodica

+0

Ah, veo que entendí mal "front-end * site *" como "front-end * app *". Tiene más margen de maniobra para las expectativas del usuario con un sitio web. – egrunin

Respuesta

34

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 desactiva el foco del elemento.

Sin embargo, si se utiliza el atributo onFocus en la entrada, y luego blur() la entrada de texto inmediatamente, el teclado se oculta y el evento onFocus puede establecer una variable para definir qué entrada de texto se centra pasado.

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

+0

Gracias Scott. Su sugerencia funcionó perfectamente cuando se probó en un formulario html regular, sin el teclado en pantalla. Parece que el jquery mobile que estoy implementando, o el objeto de teclado que estoy utilizando están creando sus propios eventos de enfoque, que aún no he encontrado (el 'foco' está en el espacio de nombres en algún lugar de la biblioteca). Por ahora, a nuestro cliente le encantó la idea, pero el hecho de que el teclado suave seguía apareciendo, había sido un apagado, por lo que estamos abandonando esta función. :( Estoy interesado en resolverlo, así que si alguien está interesado, aquí está la biblioteca de teclado: https://github.com/Mottie/Keyboard – crodica

+4

Solo un pensamiento: ¿qué pasaría si coloca un div transparente sobre cada entrada, entonces use el método onClick? Por ejemplo: '

Text:
'. El posicionamiento relativo (o absoluto) de un div principal hace que un hijo absolutamente posicionado sea relativo a su padre. –

36

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

Estaba codificando un teclado de teléfono basado en web para móvil, y cada vez que el usuario presionó un número en el teclado (compuesto por elementos td span en una tabla), el teclado virtual aparecerí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 utilizó el siguiente:

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

En realidad, esta respuesta funcionó para mí mejor que la respuesta de @ScottS, sin faltar el respeto a su respuesta. Sospecho que el tiempo transcurrido entre el enunciado de entrada html y el $ (documento) .ready() permitió que el teclado se disparara, mientras que el onfocus = blur(); sería más rápido, al menos en mi mente e impedido que el teclado se dispare, – HumbleBeginnings

10

Para más lectores/buscadores:

Como Rene Pot señala en this topic,

Al establecer el campo de entrada a readonly="true" debe impedir cualquiera escribir nada en pero aún podrá lanzar un clic evento en él.

Con este método, puede evitar que aparezca 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 seleccionadores de fecha y hora que generalmente ya implementan controles.

0

ejemplo de cómo lo hice, después de llenar una longitud máxima se borrará desde 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(); 
     } 
      }); }); 
Cuestiones relacionadas