teclado2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Teclado 2</title>
  5. const TECLAS_COMUNES = [
  6. 'Home', 'End', 'ArrowLeft', 'ArrowRight',
  7. 'Backspace', 'Delete', 'Tab'
  8. ];
  9.  
  10. function iniciar() {
  11. const form = document.getElementById('form1');
  12. form.cp.addEventListener('keydown', validarCP);
  13. form.dni.addEventListener('keydown', validarDNI);
  14. form.dni.addEventListener('keyup', ponerMayusculas);
  15. form.sexo.addEventListener('keydown', validarSexo);
  16. form.ciudad.addEventListener('keydown', validarCiudad);
  17. }
  18. function validarCP(evento) {
  19. const input = evento.target;
  20. const NUMEROS = "0123456789".split('');
  21. if (TECLAS_COMUNES.includes(evento.key)) return;
  22. if (NUMEROS.includes(evento.key)) {
  23. if (input.value.length < 5) {
  24. return;
  25. }
  26. }
  27. evento.preventDefault(); // Elimina la tecla y no sale
  28. }
  29. function validarDNI(evento) {
  30. const LETRAS = 'TRWAGMYFPDXBNJZSQVHLCKE'.split('');
  31. const input = evento.target;
  32. const NUMEROS = "0123456789".split('');
  33. if (TECLAS_COMUNES.includes(evento.key)) return;
  34. if (NUMEROS.includes(evento.key)) {
  35. if (input.value.length < 8) {
  36. return;
  37. }
  38. }
  39. if (LETRAS.includes(evento.key.toUpperCase())) {
  40. // Comprobar que el cursor esté al final
  41. if (input.selectionStart == 8) {
  42. // No se puede convertir a mayúsculas con
  43. // keydown porque la tecla aun no ha llegado al value
  44. // solo funciona con keyup
  45. //input.value = input.value.toUpperCase();
  46. return;
  47. }
  48. }
  49. evento.preventDefault(); // Elimina la tecla y no sale
  50. }
  51. function ponerMayusculas(evento) {
  52. const input = evento.target;
  53. input.value = input.value.toUpperCase();
  54. }
  55.  
  56. function validarSexo(evento) {
  57. const input = evento.target;
  58. const tecla = event.key.toUpperCase();
  59. //if (tecla == 'V' || tecla == 'M') input.value = 'Varón';
  60. //if (tecla == 'H' || tecla == 'F') input.value = 'Hembra';
  61. if (evento.key == 'Tab') return;
  62. else if (['V','M'].includes(tecla)) input.value = 'Varón';
  63. else if (['H','F','W','D'].includes(tecla)) input.value = 'Hembra';
  64. evento.preventDefault();
  65. }
  66.  
  67. function validarCiudad(evento) {
  68. const input = evento.target;
  69. const tecla = event.key.toUpperCase();
  70. if (evento.key == 'Tab') return;
  71. switch (tecla) {
  72. case 'B': input.value = 'Barcelona'; break;
  73. case 'S': input.value = 'Sabadell'; break;
  74. case 'T': input.value = 'Terrassa'; break;
  75. default: input.value = 'Pulsa B, S o T';
  76. }
  77. evento.preventDefault();
  78. }
  79. </script>
  80. label {
  81. display: block;
  82. }
  83. </style>
  84. </head>
  85. <body onload="iniciar()">
  86. <h1>Teclado 2</h1>
  87. <form id="form1">
  88. <label>cp:
  89. <input type="text" name="cp">
  90. </label>
  91. <label>dni:
  92. <input type="text" name="dni">
  93. </label>
  94. <label>sexo:
  95. <input type="text" name="sexo">
  96. </label>
  97. <label>ciudad:
  98. <input type="text" name="ciudad">
  99. </label>
  100. </form>
  101. </body>
  102. </html>

Proinf.net