1

De un formulario HTML sin poderlo tocar, dependemos de programar un .js en Javascript. Disponemos de varios campos input en los cuales se debe controlar la introducción de información correcta (sólo letras en campos como nombre o apellidos, y solo números en CP).

¿Cómo podría tranformarse éste código retocado en HTML a un código sin tocar el HTML? Me explico.

Primera forma. HTML editable + JS:

<input type="text" name="nombre" id="idnombre" size="20" onKeyPress="return soloLetras(event);" onKeyUp="javascript:this.value=this.value.toUpperCase();">
<input type="text" name="apellidos" id="idapellidos" size="40" onKeyPress="return soloLetras(event);">

function soloLetras(e){
    var key = e.keyCode || e.which;
    var tecla = String.fromCharCode(key).toLowerCase();
    var letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    var especiales = "8-37-39-46";

    var tecla_especial = false
    for(var i in especiales){
        if(key == especiales[i]){
            tecla_especial = true;
            break;
        }
    }

    if(letras.indexOf(tecla) == -1 && !tecla_especial){
        return false;
    }
}

Segunda forma. HTML NO editable + JS:

<input type="text" name="nombre" id="idnombre" size="20">
<input type="text" name="apellidos" id="idapellidos" size="40">

¿Dónde tengo el error?

window.onload = function(){
    miformulario.nombre.addEventListener("keypress", function(){
        return soloLetras(event);
    }, false);

    miformulario.nombre.addEventListener("keyup", function(){
        this.value = this.value.toUpperCase();
    }, false);

    miformulario.apellidos.addEventListener("keypress", function(){
        return soloLetras(event);
    }, false);
}
8
  • ¿Quieres reutilizar la función para ambos campos? Te recomiendo hacer las comprobaciones en el evento onkeyup en vez de onkeypress. ¿Has probado a hacerlo con HTML5? No entiendo algunas expresiones como "De un formulario HTML sin poderlo tocar". Commented el 16 may. 2017 a las 11:07
  • Claro para no tener que reescribirla tantas veces como campos quiera evaluar, ¿debería reutilizarla, no? No he probado HTML5, debido a que no permiten tocar el código HTML, es decir, no se puede manejar el .html
    – omaza1990
    Commented el 16 may. 2017 a las 11:10
  • No entiendo cuando dices que no se puede manejar el HTML. ¿A qué te refieres con manejar o tocar el HTML? Es decir, si no puedes tocar el HTML no puedes modificar las funciones o parámetros que le pasas a un evento, ¿no? ¿Es una pregunta de clase? Si es así te agradecería que nos pusieras en contexto. Commented el 16 may. 2017 a las 11:12
  • Sí, es una pregunta de clase. Hice el código manipulando un poco el .html para pasarle los eventos a cada input pero es erróneo, debido a que el .html no se puede tocar, sólo se le puede declarar el script .js con la siguiente sentencia: <script type="text/javascript" src="funciones.js"></script>. Todas las funciones u operaciones a realizar se deben hacer en el "funciones.js".
    – omaza1990
    Commented el 16 may. 2017 a las 11:17
  • Ok, ahora lo tengo claro. Voy a comer, probablemente te respondan antes de que vuelva. En caso contrario lo haré a la vuelta. Commented el 16 may. 2017 a las 11:22

2 respuestas 2

2

Puedes agregar los eventos de la siguiente manera en tu archivo funciones.js haciendo uso de element.addEventListener().

Este sería el equivalente al código que has puesto:

/* Tu función, tal y como la tienes con su parámetro */
function soloLetras(e) {
    var key = e.keyCode || e.which;
    var tecla = String.fromCharCode(key).toLowerCase();
    var letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    var especiales = "8-37-39-46";

    var tecla_especial = false
    for(var i in especiales){
        if(key == especiales[i]){
            tecla_especial = true;
            break;
        }
    }
    if(letras.indexOf(tecla) == -1 || tecla_especial){
        /* Evitamos la pulsación */
        e.preventDefault();
    }
}
/* Agrego el evento "onload" a la página para agregar los gestores de
  eventos cuando la página se haya generado */
window.addEventListener("load", function() {
  /* Agrego un gestor de eventos "keypress" para todos los campos de tipo "text" */
  var inputs = document.querySelectorAll('input[type="text"]');
  /* No es posible usar .forEach en todos los navegadores por ser un NodeList */
  for (var i = 0; i < inputs.length ; i++) {
    inputs[i].addEventListener(
      "keypress",
      soloLetras,
      false
    );
  }
  /* Lo mismo para el evento "onkeyup" del campo "nombre" */
  miformulario.nombre.addEventListener(
    "keyup",
    function(){
      if (this.value != this.value.toUpperCase()) {
        var start = this.selectionStart,
          end = this.selectionEnd;
        this.value = this.value.toUpperCase();
        this.setSelectionRange(start, end);
      }
    },
    false
  );
});
<!-- La siguiente línea sólo funciona cuando generes el archivo
  llamado "funciones.js", aquí lo dejo con carácter ilustrativo -->
<script src="funciones.js"></script>
<form name="miformulario" onSubmit="return validar(this)">
  <input type="text" name="nombre" id="idnombre" size="20">
  <input type="text" name="apellidos" id="idapellidos" size="40">
</form>

Hay que tener en cuenta que en esta especificación el EventListener no devuelve nada:

// Introduced in DOM Level 2:
interface EventListener {
  void handleEvent(in Event evt);
};

Por lo que hay que hacer uso de Event.preventDefault() para evitar que se propague el evento y, de esta manera, cancelar la pulsación de la tecla.

Edito: Mejora sugerida por el autor para agregar el gestor del evento "keypress" a todos los campos de tipo texto. He usado document.querySelectorAll() para obtener el listado de elementos y he iterado por ellos usando un bucle for por la imposibilidad de usar Array.forEach en ciertos navegadores por tratarse de un NodeList.

8
  • No me funciona. Edito mi código para que puedas ver dónde puedo tener mi fallo... Editando en 3, 2, 1 ya...
    – omaza1990
    Commented el 16 may. 2017 a las 12:27
  • ¿A qué te refieres con "¿Dónde tengo el error?"? ¿Has visto mi última edición y el uso de preventDefault() para cancelar el evento? Commented el 16 may. 2017 a las 12:32
  • Ahora sí me funciona pero mi duda es la siguiente: ¿Qué diferente hay entre el window.onload = {} con tu código: "window.addEventListener("load", function() {"???
    – omaza1990
    Commented el 16 may. 2017 a las 12:35
  • Nada, en la especificación DOM level 2 se agregó el nuevo, pero ambos son válidos. Commented el 16 may. 2017 a las 12:36
  • Muchas gracias OscarGarcia. Seguiré probando más ejercicios del DOM; que lo tengo bastante perdido.
    – omaza1990
    Commented el 16 may. 2017 a las 12:38
2

Lo que pareces necesitar es asignar manejadores de eventos a ciertos elementos seleccionándolos desde el DOM.

Para ello puedes, en este caso, seleccionar los elementos por su atributo name.

Ejemplo:

document.querySelector('[name=nombre]').addEventListener('keypress', soloLetras);
document.querySelector('[name=apellidos]').addEventListener('keypress', soloLetras);
1
  • Te llevas mi +1 por el uso de querySelector :) Commented el 16 may. 2017 a las 12:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.