type="button" que sea enter

lktmaster · #1 (**permalink**) 02/03/2011, 02:18

Hola, Estoy haciendo una calculadora en html y necesitaria que el "=" lo pudieras activar con el enter.
He estado buscando, y no lo tengo muy claro si se tendria que hacer en javascript o solo con html ya se podria.

Aqui les dejo la parte de html del boton:

Código HTML:

<a class="igual" name="DoIt" value="  =  " onclick="Calc.Input.value = eval(Calc.Input.value)" type="button" style="position: absolute; top:191.667px; left: 99.666px;"></a>

Muchas gracias por todo

lktmaster · #2 (**permalink**) 02/03/2011, 08:19

Hos dejo aqui todo el codigo de la calculadora, haver si hos sirve.

ya funciona en todos los navegadores aunque el :active no me funciona en firefox no se si és normal.

aparte de eso solo falta el "=" en el enter y ya estaria.

Código HTML:

<html><head>
</head>
<style type="text/css">
#box {
  margin: 40px auto;
  width:196;
  height:248;
  color: inherit;
  background: url("images/fondo.png");background-repeat: no-repeat; position:relative;}
img { border:0; }

.in {background:url(images/num.png); background-repeat: no-repeat;width: 127px; height: 40px;}


.zero   {background:url(images/tot.png)0 -720px; top:191.667px; left:56.333px;}
.uno 	{background:url(images/tot.png)0 -675px; top:57.668px; left:13px;}
.dos 	{background:url(images/tot.png)0 -630px; top:57.668px; left:56.333px;}
.tres 	{background:url(images/tot.png)0 -585px; top:57.668px; left:99.666px;}
.cuatro {background:url(images/tot.png)0 -540px; top:102.334px; left: 13px;}
.cinco  {background:url(images/tot.png)0 -495px; top:102.334px; left:56.333px;}
.seis   {background:url(images/tot.png)0 -450px; top:102.334px; left:99.666px;}
.siete  {background:url(images/tot.png)0 -405px; top:147px;     left:13px;}
.ocho   {background:url(images/tot.png)0 -360px; top:147px;     left:56.333px;}
.nueve  {background:url(images/tot.png)0 -315px; top:147px;     left:99.666px;}
.logo   {background:url(images/tot.png)0 0px;    top:13.002px;  left:142.999;}
.por    {background:url(images/tot.png)0 -45px;  top:147px;     left:142.999px;}
.dividir{background:url(images/tot.png)0 -90px;  top:191.667px; left:142.999px;}
.mas    {background:url(images/tot.png)0 -135px; top:57.668px;  left:142.999px;}
.menos  {background:url(images/tot.png)0 -180px; top:102.334px; left:142.999px;}
.c      {background:url(images/tot.png)0 -270px; top:191.667px; left:13px;}
.igual  {background:url(images/tot.png)0 -225px; top:191.667px; left:99.666px;}

.zero:active    {background:url(images/tot.png)-60px -720px; top:191.667px; left:56.333px;}
.uno:active     {background:url(images/tot.png)-60px -675px; top:57.668px; left:13px;}
.dos:active     {background:url(images/tot.png)-60px -630px; top:57.668px; left:56.333px;}
.tres:active    {background:url(images/tot.png)-60px -585px; top:57.668px; left:99.666px;}
.cuatro:active  {background:url(images/tot.png)-60px -540px; top:102.334px; left: 13px;}
.cinco:active   {background:url(images/tot.png)-60px -495px; top:102.334px; left:56.333px;}
.seis:active    {background:url(images/tot.png)-60px -450px; top:102.334px; left:99.666px;}
.siete:active   {background:url(images/tot.png)-60px -405px; top:147px;     left:13px;}
.ocho:active    {background:url(images/tot.png)-60px -360px; top:147px;     left:56.333px;}
.nueve:active   {background:url(images/tot.png)-60px -315px; top:147px;     left:99.666px;}
.logo:active    {background:url(images/tot.png)-60px 0px;    top:13.002px;  left:142.999;}
.por:active     {background:url(images/tot.png)-60px -45px;  top:147px;     left:142.999px;}
.dividir:active {background:url(images/tot.png)-60px -90px;  top:191.667px; left:142.999px;}
.mas:active     {background:url(images/tot.png)-60px -135px; top:57.668px;  left:142.999px;}
.menos:active   {background:url(images/tot.png)-60px -180px; top:102.334px; left:142.999px;}
.c:active       {background:url(images/tot.png)-60px -270px; top:191.667px; left:13px;}
.igual:active   {background:url(images/tot.png)-60px -225px; top:191.667px; left:99.666px;}

.zero,
.uno,
.dos,
.tres,
.cuatro,
.cinco,
.seis,
.siete,
.ocho,
.nueve,
.logo,
.por,
.dividir,
.mas,
.menos,
.c,
.igual {background-repeat: no-repeat;	width: 40px; height: 40px;position: absolute;}

</style>

<body>

<div id="box">

<form name="Calc">
<input class="in" name="Input" type="text" style="font-family: arial; font-size: 15pt; text-align: left; position: absolute; top: 13.002px; left: 13px;">

<a class="logo"  href="http://www.vicensvivesdigital.com" style="position: absolute; top: 13.002px; left: 142.999;"></a>
   
<a class="uno" name="one" value="  1  " onclick="Calc.Input.value += '1'" type="button"></a>
<a class="dos" name="two" value="  2  " onclick="Calc.Input.value += '2'" type="button"></a>
<a class="tres" name="three" value="  3  " onclick="Calc.Input.value += '3'" type="button"></a>
<a class="mas" name="plus" value="  +  " onclick="Calc.Input.value += '+'" type="button"></a>

<a class="cuatro" name="four" value="  4  " onclick="Calc.Input.value += '4'" type="button"></a>
<a class="cinco" name="five" value="  5  " onclick="Calc.Input.value += '5'" type="button"></a>
<a class="seis" name="six" value="  6  " onclick="Calc.Input.value += '6'" type="button"></a>
<a class="menos" name="minus" value="  -  " onclick="Calc.Input.value += '-'" type="button"></a>
 
<a class="siete" name="seven" value="  7  " onclick="Calc.Input.value += '7'" type="button"></a>
<a class="ocho" name="eight" value="  8  " onclick="Calc.Input.value += '8'" type="button"></a>
<a class="nueve" name="nine" value="  9  " onclick="Calc.Input.value += '9'" type="button"></a>
<a class="por" name="times" value="  x  " onclick="Calc.Input.value += '*'" type="button"></a>
 
<a class="c" name="clear" value="  c  " onclick="Calc.Input.value = ''" type="button"></a>
<a class="zero" name="zero" value="  0  " onclick="Calc.Input.value += '0'" type="button"></a>
<a class="igual" name="DoIt" value="  =  " onclick="Calc.Input.value = eval(Calc.Input.value)"></a>
<a class="dividir" name="div" value="  /  " onclick="Calc.Input.value += ' / '" type="button"></a>

</form>

</div>


</body></html>

lktmaster · #3 (**permalink**) 03/03/2011, 01:53

Si alguien fuera tan amable de decirme si es posible o por donde mirar, me lo intentaria buscar yo solo, pero es que no se como buscarlo y llevo 2 dias dando palos de ciego.

gracias

lktmaster · #4 (**permalink**) 03/03/2011, 05:33

He encontrado algo, pero no me funciona no se como hacerlo funcionar.

Opcion 1

Código HTML:

 
<script language="JavaScript" type="text/JavaScript">
    function keyBoard(presskey)
    {
        if (presskey == 13) Calc.Input.value = eval(Calc.Input.value); 
    }
    
 </script>
 
<a class="igual" name="DoIt" onclick="Calc.Input.value = eval(Calc.Input.value)"></a>

Opcion 2

Código HTML:

 
<script language="JavaScript" type="text/JavaScript">
    function SearchIntro(oEvent){
        if ((oEvent.keyCode && oEvent.keyCode==13)
        || (oEvent.which && oEvent.which==13)) {
        Calc.Input.value = eval(Calc.Input.value);
    }
    
 </script>
 
<a class="igual" name="DoIt" onclick="Calc.Input.value = eval(Calc.Input.value)" onKeyPress="searchIntro(event)"></a>

haver si me pueden ayudar.

Grox · #5 (**permalink**) 03/03/2011, 16:21

Me tome la molestia de armarte el codigo:

Código Javascript:

Ver original<head>
<script language="JavaScript" type="text/JavaScript">
    function KeyBoard(e){
    var n = document.getElementById('Nums').value;
    var x = eval(n);
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==13) document.getElementById('Nums').value = x; }
</script>
</head>
<body onkeypress="KeyBoard(event);">
<input type="text" id="Nums" name="Calc">
</body>

Espero que te sea de ayuda!, saludos.

lktmaster · #6 (**permalink**) 04/03/2011, 02:25

Ufff!!

Muchisimas gracias eres un crack y me ha ayudado muchissimo, ahora si me hace el calculo!!!

Ahora solo falta que no se me borre el resultado tal i como lo da,
ahora cuando doy enter me sale el resultad un milisegundo, y despés se me va a la tabla de dirección del navegador.

ejemplo:

25-4

file:///Users/Desktop/calculator/calculator.html?Calc=21

si me dijeras como evitar este problema con el enter yo ya....

igualmente muchisimas gracias ya que me has solucionado un gran problema.

Grox · #7 (**permalink**) 05/03/2011, 20:46

Es porque lo metiste entre <form> sacalo, y que quede solo el input...

Saludos!

lktmaster · #8 (**permalink**) 08/03/2011, 02:17

Grox no me funciona, si lo saco del <form> me lo sigue pasando arriba, y aparte no me deja calcularlo con los botones.

Gracias y perdona mi ineptitud.