Un teclado en pantalla con jquery muy elegante

DESCARGA : Jquery keyboard

DESCARGA : Jquery keyboard Input

Aquí traigo un teclado virtual hecho con javascript y jquery, esta muy interesante ya que podría usarse prácticamente en cualquier sitio que necesite componentes de accesibilidad, este es un buen ejemplo de un teclado en pantalla windows. muy interesante la demostración.

sie deseas usar un input tienes que modificar algunos parametros en el archivo keyboard.js todos los valores $write.html por $write.val y modificar el archivo style.css por


#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

 

You may also like...

  • cesar

    q cambios se necesitarian para usar un input en lugar de un textarea?

  • Develoteca

    De echo no cambia mucho vamos a
    adjuntar un archivo modificado, lo puedes descargar ya esta modificado.

  • Pingback: Otro impresionante teclado virtual con jquery | DevelotecaDeveloteca()

  • Kike Duarte

    Si deseo capturar en multiples campos :O ??

  • Mcperson

    Hola.
    Gracias por el teclado.
    En mi caso tengo un input con autocomplete, pero cuando escribo algo con este teclado no me autocompleta.
    Sabes a que se debe?
    Saludos.

    • Develoteca

      Bueno tendrias que abrir el archivo keyboard.js
      y agregar el evento que se desencadena para mostrar el autocomplemento.

      Lo puedes agregar en la siguiente línea del archivo
      // Add the character
      $write.val($write.val() + character);

      Nota: Algunos plugins de autocomplemento trabajan con el evento onfocus y como no existe por eso tiene problemas al funcionar, si tienes el nombre del plugin te puedo guiar.
      Saludos.

  • angel

    Si en una pantalla tengo varios inputs, y deseso que el teclado escriba solo en aquel donde tengo el cursor, ¿cómo podría hacer esto?

    Muchas gracias de antemano =D

    • Soporte doudounaturalchic

      Aunque hace tiempo de esto, me parece una buena opción para pantallas táctiles.

      Añade en la línea 5:

      $(‘input, textarea’).focus(function () {
      $write = $(this);
      });