Como puede ser que no funcione en firefox

3rps · #1 (**permalink**) 09/06/2011, 18:08

Hola que tal gente de FDW.

Mi problema es el siguiente: estoy empezando a hacer una calculadora en javascript usando en parte jquery.
Por ahora la funcionalidad sería la siguiente:
- Hay 2 inputs number
- Cuando en el primero se aprieta "+","-","*", ó "/" se escribe el signo presionado entre el espacio de los dos inputs
- Por último hace un .focus() en el segundo input. (Esto no funciona en firefox no porque sea un bug sino porque "es un privilegio" que tienen los usuarios de firefox)

Lo pueden ver online aquí: http://planeta3d.net/calc_prueba/
Si no quieren ver el codigo de fuente, aquí se los dejo:

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
        <script type="text/javascript"> 
        $(document).ready(function() {
            
            $('#a').keypress(function() {
            var key_code = window.event.keyCode;
            switch (key_code) {
                case 43:
                // +
                var operando = ' + ';
                event.preventDefault();
                $('#b').focus();
                break
                case 45:
                // -
                var operando = ' - ';
                $('#b').focus();
                event.preventDefault();
                break
                case 42:
                // *
                var operando = ' * ';
                $('#b').focus();
                event.preventDefault();
                break
                case 47:
                // /
                var operando = ' / ';
                $('#b').focus();
                event.preventDefault();
                break
                default:
                var operando = '&nbsp;'
                break
            }
            $('.operando').html(operando);
            });
            $('#form').submit(function() {
                event.preventDefault();
                document.write('probando');
            });
        });
        </script> 
        <style type="text/css"> 
            #a, .operando {
                float: left;
            }
            .operando {
                padding-right: 4px;
            }
        </style> 
        <title>Calc</title> 
    </head> 
    <body> 
        <form method="post" action="index.php" id="form"> 
            <input type="number" name="a" size="20" id="a"  /> 
            <div class="operando"> </div> 
            <input type="number" name="b" size="20" id="b"  /> 
            <input type="submit" name="submit" id="submit"  /> 
        </form> 
    </body> 
</html>

Por favor fígense con cualquier navegador, inclusive con IE 7

.
Si en firefox les funciona, háganmelo saber por favor.
Desde ya, gracias
Saludos

3rps · #2 (**permalink**) 09/06/2011, 19:47

Alguien ha probado ya la web con firefox. Por favor respondan :)

zerokilled · #3 (**permalink**) 09/06/2011, 21:04

buenas,
te recomiendo que instales el addons firebug. en la consola recibiras reportes de posibles errores. en fin, en firefox el objeto event no se genera en el ambito global. de hecho, eso es una implementacion incorrecta de iexplorer. que otros navegadores (ej. chrome) lo acepten, es por pura compatibilidad con codigos no estandar. el objeto event se obtiene como parametro del handler registrado en el evento. es decir, la funcion anonima que le pasas a keypress debe recibir dicho objeto.

pd: si estas esperando una respuesta a un tema, por favor, mantenga paciencia.

InKarC · #4 (**permalink**) 09/06/2011, 23:04

zerokilled esta en lo correcto; en practica significa...

Remplaze esto:

Código Javascript:

Ver original$('#a').keypress(function() {
var key_code = window.event.keyCode;

por esto:

Código Javascript:

Ver original$('#a').keypress(function(event) {
var key_code = event.keyCode;

---------------------------------------

Por cierto, ten en cuenta que con eval() de javascript puedes realizar todas las operaciones, por ejemplo si escribe 1+1 en #a efectivamente le mostrara "2"

Código Javascript:

Ver original$(document).ready(function() {
            $("#form").submit(function(){
                var operacion = $("#a").val();
                alert(eval(operacion))  
                return false;
            })
        });

3rps · #5 (**permalink**) 10/06/2011, 20:34

@zerokilled gracias por tu pronta respuesta. Perdón que sea impaciente, lo que pasa es que estos rollo me comen la cabeza! Efectivamente como decías el conflicto estaba en la línea que marcó @InKarC
______________________
@InKarC muchas gracias

, el código que me diste funciona a la perfección.

Ahora el único problema que queda es que firefox no reconoce + - * / , el número que les asigna a cada uno es 0 !
Pero igual eso ya es problema mío. Gracias por la ayuda!
Si encuentro alguna solución al último problema, posteo el code
Saludos