[SOLUCIONADO] Problemas con onBlur

rsanjose · #1 (**permalink**) 15/03/2015, 15:34

A ver si me podéis ayudar.

He creado un fichero onblur.php con el siguiente código:

<!DOCTYPE html>
<html>
<body>

<?php echo "<p>".$_GET['texto']."</p>"; ?>
<form action="onblur.php">
Ponga un texto en minúsculas: <input type="text" id="texto" name="texto" onblur="myFunction();">
<button type="submit">Ok</button>
</form>

<script>
function myFunction() {
var x = document.getElementById("texto");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

El problema es que no siempre me funciona. Es un ejemplo muy sencillo que al salir del campo de texto lo convierte en mayúsculas. Si en lugar de salir con TAB pulsamos Intro, no funciona.

Supongo que el problema está en que el DOM se destruye antes de ejecutarse el script, pero no estoy seguro.

La función que quiero ejecutar es mucho más compleja y modifica dos campos ocultos localizados con getElementById que luego son devueltos por el formulario.

Supongo que es una tontería, pero de verdad que me estoy volviendo loco.

Alexis88 · #2 (**permalink**) 15/03/2015, 16:39

Bienvenido a FDW.

Cuando pulsas la tecla ENTER mientras un campo de texto del formulario tiene el enfoque, se produce el evento submit con el cual se envían los datos del formulario hacia el archivo destino para que los procese. Así como ejecutas la función 'myFunction' cuando se produce el evento blur en la caja de texto, también podrías ejecutarla cuando se produzca el evento keypress y se haya verificado que la tecla pulsada haya sido ENTER.

Código HTML:

Ver original<input onkeypress = "ejemplo(event)" />

Código Javascript:

Ver originalfunction ejemplo(evento){
    if (evento.keyCode == 13){ //13 es el código de la tecla ENTER
        //Tus instrucciones
    }
}

Saludos

rsanjose · #3 (**permalink**) 16/03/2015, 01:45

Muchas gracias, creo que con tu ayuda ha quedado solucionado.

Os pego el código por si le ayuda a alguien:

Código:

<!DOCTYPE html>
<html>
<body>

<?php echo "<p>".$_GET['texto1']."-".$_GET['texto2']."</p>"; ?>
<form action="onblur.php">
Texto1: <input type="text" id="texto1" name="texto1" onkeypress="if (event.which == 13) {myProcessKey('texto1')};" onblur="myFunction('texto1');">
Texto2: <input type="text" id="texto2" name="texto2" onkeypress="if (event.which == 13) {myProcessKey('texto2')};" onblur="myFunction('texto2');">
<button type="submit">Ok</button>
</form>

<script>
function myProcessKey(field) {
	myFunction(field);
}

function myFunction(field) {
    x=document.getElementById(field);
    x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Saludos.
Rafa