Eventos de teclado

GuillemPejo · #1 (**permalink**) 04/09/2012, 09:30

Hola, estoy intentando crear una calculadora y tengo un problema:
Haciendo click a los botones funciona, pero cuando con el teclado escribes la operación y le das a Enter, la operación desaparece y no sale el resultado.
Lo que quiero es que al dar al Enter pase lo mismo que cuando le doy con el ratón en el botón de Resultado: que me muestre el resultado.
He estado mirando y el código de Enter con JavaScript es 13.
Les dejo el código haber si me pueden ayudar.
Gracias.

Código:

<html>
<head>
	<title>Calculadora</title>
		<link rel="stylesheet" type="text/css" href=".css">

	<!--Script Calculadora-->
	<script type="text/javascript">


	function addChar(input, character)
{
    if(input.value == null || input.value == "0")
        input.value = character
    else
        input.value += character
}

function deleteChar(input)
{
    input.value = input.value.substring(0, input.value.length - 1)
}

function changeSign(input)
{
    // could use input.value = 0 - input.value, but let's show off substring
    if(input.value.substring(0, 1) == "-")
	input.value = input.value.substring(1, input.value.length)
    else
	input.value = "-" + input.value
}

function compute(form) 
{
	form.display.value = eval(form.display.value)
}

function square(form) 
{
	form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) 
{
	for (var i = 0; i < str.length; i++) {
		var ch = str.substring(i, i+1)
		if (ch < "0" || ch > "9") {
			if (ch != "/" && ch != "*" && ch != "+" && ch != "-" 
				&& ch != "(" && ch!= ")") {
				alert("invalid entry!")
				return false
			}
		}
	}
	return true
}

	</script>

</head>
<body>
<form>
<table border="5" align=center>
<tr align="center">
<td colspan = 4>

<table border="3">
<tr>
<td align=center>


<!--Input Resultado-->
<input name="display" value="" size=20 autofocus></td>
</tr>
</table>

</td>
</tr>

<tr align=center>
<td>
<input type="button" value="    7    "
  onClick="addChar(this.form.display, '7')">
</td>
<td>
<input type="button" value="    8    "
  onClick="addChar(this.form.display, '8')">
</td>
<td>
<input type="button" value="    9    "
  onClick="addChar(this.form.display, '9')">
</td>
<td>
<input type="button" value="    /     "
  onClick="addChar(this.form.display, '/')">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value="    4    "
  onClick="addChar(this.form.display, '4')">
</td>
<td>
<input type="button" value="    5    "
  onClick="addChar(this.form.display, '5')">
</td>
<td>
<input type="button" value="    6    "
  onClick="addChar(this.form.display, '6')">
</td>
<td>
<input type="button" value="    *    "
  onClick="addChar(this.form.display, '*')">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value="    1    "
  onClick="addChar(this.form.display, '1')">
</td>
<td>
<input type="button" value="    2    "
  onClick="addChar(this.form.display, '2')">
</td>
<td>
<input type="button" value="    3    "
  onClick="addChar(this.form.display, '3')">
</td>
<td>
<input type="button" value="     -    " 
  onClick="addChar(this.form.display, '-')">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value="    0    "
  onClick="addChar(this.form.display, '0')"> 
</td>
<td>
<input type="button" value="     .    "
  onClick="addChar(this.form.display, '.')"> 
</td>
<td>
<input type="button" value="   +/-   "
  onClick="changeSign(this.form.display)">
</td>
<td>
<input type="button" value="    +    "
  onClick="addChar(this.form.display, '+')">
</td>
</tr>

<tr align=center>
<td>
<input type="button" value="    (    "
  onClick="addChar(this.form.display, '(')"> 
</td>
<td>
<input type="button" value="     )    "
  onClick="addChar(this.form.display, ')')"> 
</td>
<td>
<input type="button" value="   sq    "
  onClick="if (checkNum(this.form.display.value))
	{ square(this.form) }">
</td>
<td>
<input type="button" value="    <-   "
  onClick="deleteChar(this.form.display)">
</td>
</tr>

<tr align=center>
<td colspan="2">

<!--Botón de resultado-->
<input type="button" value="     Resultado      " name="enter"
  onClick="if (checkNum(this.form.display.value))
	{ compute(this.form) }">
</td>
<td colspan="2">
<input type="button" value="         C          "
  onClick="this.form.display.value = 0 ">
</td>
</tr>
</table>
</form>
</body>
</html>

maycolalvarez · #2 (**permalink**) 04/09/2012, 09:34

eso se debe a que por defecto el form se envía al presionar Enter, simplemente puedes evitarlo cancelando el envío del form:

<form onsubmit="return false;" >

y listo!

Dradi7 · #3 (**permalink**) 04/09/2012, 09:43

Cita:

Iniciado por maycolalvarez

eso se debe a que por defecto el form se envía al presionar Enter, simplemente puedes evitarlo cancelando el envío del form:

<form onsubmit="return false;" >

y listo!

Pon un nombre a tu formulario name="frm"

y ademas de esto debes agregar esto en la linea de tu

<input name="display" value="" size=20 onkeypress="resulta(event)"/>

y esta función mas

Código Javascript:

Ver originalfunction resulta(e){
                if(e.keyCode == 13){
                    if (checkNum(document.forms["frm"]["display"].value)){ compute(document.forms["frm"]) }
                }
            }

GuillemPejo · #4 (**permalink**) 04/09/2012, 10:01

Muchas gracias a los dos :)

GuillemPejo · #5 (**permalink**) 06/09/2012, 09:05

Cita:

Iniciado por Dradi7

Pon un nombre a tu formulario name="frm"

y ademas de esto debes agregar esto en la linea de tu

<input name="display" value="" size=20 onkeypress="resulta(event)"/>

y esta función mas

Código Javascript:

Ver originalfunction resulta(e){
                if(e.keyCode == 13){
                    if (checkNum(document.forms["frm"]["display"].value)){ compute(document.forms["frm"]) }
                }
            }

Muchísimas gracias, aunque me han surgido algunas dudas más:
Primero: ¿Como puedo bloquear las letras, de manera que solo puedas escribir número (y los operadores), en el input?
Y segundo: ¿Como puedo quitar el cursor del input para que no me salga parpadeando?
Gracias de nuevo

GuillemPejo · #6 (**permalink**) 06/09/2012, 09:06

Cita:

Iniciado por Dradi7

Pon un nombre a tu formulario name="frm"

y ademas de esto debes agregar esto en la linea de tu

<input name="display" value="" size=20 onkeypress="resulta(event)"/>

y esta función mas

Código Javascript:

Ver originalfunction resulta(e){
                if(e.keyCode == 13){
                    if (checkNum(document.forms["frm"]["display"].value)){ compute(document.forms["frm"]) }
                }
            }

Muchísimas gracias, aunque me han surgido algunas dudas más:

Primero:¿Como puedo bloquear las letras, de manera que solo puedas escribir número (y los operadores), en el input?

Y segundo: ¿Como puedo quitar el cursor del input para que no me salga parpadeando?

Gracias de nuevo

Disculpen me lo envió dos veces

Dradi7 · #7 (**permalink**) 06/09/2012, 11:59

Acomoda esta funcion a tu gusto con esto solo permites números

Código Javascript:

Ver originalfunction validateNumber(e){
    var evt = e.keyCode  ? e.keyCode : e.which;
    if(evt == 13 || evt == 8 || evt == 9){
        return true;
    }
    return isNumber(String.fromCharCode(evt));
}
function isNumber(value){
    var regNumber = /[\d]/;
    return regNumber.test(value);
}

GuillemPejo · #8 (**permalink**) 06/09/2012, 13:12

Muchas gracias! (: