Hacer foco a un campo al realizarse un evento.

af1 · #1 (**permalink**) 13/08/2012, 09:22

Hola. Les cuento el siguiente problema.

Estoy validando un campo input con javascript. El código:

function esDecimal(e){
var numero=window.event.srcElement.value;
if (!/^[$]*[0-9]*.[0-9]*$/.test(numero)){ //Verifico que sea decimal por medio de una expresión regular.
alert("El valor " + numero + " no es un número");
window.event.srcElement.focus(e);
}else{
guardarDatos(e); //envío datos por AJAX
}
}

La comprobación se hace bien. El problema que tengo quiero que se haga foco al elemento que produjo el evento. Probé con la línea "window.event.srcElement.focus(e);", pero no está funcionando.

Que opinan?

Saludos!

djaevi · #2 (**permalink**) 13/08/2012, 11:05

puedes agregar this.focus(); al lado del manejador de eventos del input que usas x ej:

<input type="text" onblur="esDecimal(); this.focus();">

aunque no llego a entender bien como llamas tu funcion, prueba como lo has escrito pero sin pasarle el parametro e aver si te funciona, supongo que si para recuperar el valor usas window.event.srcElement.value y te funciona bien tambien puedes usar window.event.srcElement.focus(); y no deberia tener problemas.

Saludos!

emprear · #3 (**permalink**) 13/08/2012, 13:12

Cita:

Iniciado por af1

Hola. Les cuento el siguiente problema.

Estoy validando un campo input con javascript. El código:

function esDecimal(e){
var numero=window.event.srcElement.value;
if (!/^[$]*[0-9]*.[0-9]*$/.test(numero)){ //Verifico que sea decimal por medio de una expresión regular.
alert("El valor " + numero + " no es un número");
window.event.srcElement.focus(e);
}else{
guardarDatos(e); //envío datos por AJAX
}
}

La comprobación se hace bien. El problema que tengo quiero que se haga foco al elemento que produjo el evento. Probé con la línea "window.event.srcElement.focus(e);", pero no está funcionando.

Que opinan?

Saludos!

En primer lugar, tu expresión regular no es correcta (5x5 --> validaría)
En segundo si estás validadndo un input, no sé por que te complicás con
var numero=window.event.srcElement.value;
Te aconsejo esto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function esDecimal(){
 var numero=document.getElementById('precio');
 if((!validarNumero(numero.value))||(numero.value == "")){
 numero.value="";
 numero.style.backgroundColor = 'red';
 numero.focus();
 alert("El valor " + numero.value + " no es un número");
return false;
 }else{
 // aquí decidís que es lo que querés pasar
var valor = parseFloat(numero.value);
alert('Con redondeo: ' + parseFloat(valor).toFixed(2));
var a = Math.floor(valor * 100) / 100;
alert('Sin redondeo 2 decimales: ' + a.toFixed(2));
alert('Numero completo: ' + valor);
 
 //guardarDatos(numero); //envío datos por AJAX
 }
 }
 // funcón para validar enteros o flotantes
 function validarNumero(input){
return (!isNaN(input)&&parseInt(input)==input)||(!isNaN(input)&&parseFloat(input)==input);
}
 
//]]>
</script>
</head>
<body>
<form action="#" onsubmit="return esDecimal()">
<input type="text" id="precio" name="precio" value="" /><br /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
</body>
</html>

Saludos

af1 · #4 (**permalink**) 14/08/2012, 05:55

Gracias gente. Probé con "5x5" y si, pasa. Voy a revisar el código que me pasaste y ver como reemplazarlo.

Por ahora sigo sin poder hacer foco. Escribo el código que tengo.

En PHP tengo una serie de input dentro de filas en una tabla:

Código PHP:

  print "<tr> 
             
                <td class='celda_izquierda' id='hora_comuenzo'>$hora_comienzo</td> 
                <td class='celda_interior'  id='duracion_corte'>$duracion_corte</td> 
                <td class='celda_interior'><input $solo_lectura name='numero_reclamo-$id_corte' class='oculto' type='text' value='$numero_reclamo'></input></td> 
                <td class='celda_interior'><input $solo_lectura name='costo_equipos_daniados-$id_corte' class='oculto' type='text' value='$$costo_equipo' ></input></td> 
                <td class='celda_interior'><input $solo_lectura name='costo_perdidas_materiales-$id_corte' class='oculto' type='text' value='$$perdidas_materiales'></input></td> 
                <td class='celda_interior'><input $solo_lectura name='costo_perdidas_mano_obra-$id_corte' class='oculto' type='text' value='$$perdidas_mano_obra'></input></td> 
                <td class='observaciones'><textarea $solo_lectura name='observaciones-$id_corte' class='oculto' value='' rows='1' cols='100'>$observaciones</textarea></td> 
            </tr>";

Después. Con javascript inicializo el evento:

Código Javascript:

Ver originaladdEvent(vec[f],'change',esDecimal,false);

Y después verifico con la función.

Código Javascript:

Ver originalfunction esDecimal(e){
    var numero=window.event.srcElement.value;
    if (!/^[$]*[0-9]*.[0-9]*$/.test(numero)){ 
        alert("El valor " + numero + " no es un número");
        window.event.srcElement.focus();
    }else{
        guardarDatos(e); //envío datos por AJAX
    }
 }

Como envío los datos por ajax no tengo una etiqueta "<form>" que envuelva a los input, entonces puede ser que no se pueda hacer foco por este motivo?...

Saludos!