Enable button event when pressing key on keyboard

Navigation
3

I'm developing a calculator, and I need when the user presses the enter key as if he was pressing the igual key.

The calculator is within form , so I use this code to disable Post of form . 

 <script>
    $(document).ready(function() {
        $('input').keypress(function(e) {
            var code = null;
            code = (e.keyCode ? e.keyCode : e.which);
            return (code == 13) ? false : true;
        });
    });
</script>

And to click on the igual button, I tried using this code: 

$(document).ready(function() {
        $('input').keypress(function(e) {
            if (code == 13) {
                $('#calculate').click();
            }
            return;
        });
    });

Here is the complete code: 

//Desabilita a função Post do form
$(document).ready(function() {
            $('input').keypress(function(e) {
                var code = null;
                code = (e.keyCode ? e.keyCode : e.which);
                return (code == 13) ? false : true;
            });
        });

//Evento click no botao
 $(document).ready(function() {
        $('input').keypress(function(e) {
            if (code == 13) {
                $('#calculate').click();
            }
            return;
        });
    });
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formname="myform">
    <table width="210" cellspacing="2" cellpadding="2">
        <tr>
            <td align="center">
                <table width="173" border="0" cellspacing="1" cellpadding="1" height="130">
                    <tr>                             </tr>
                    <tr>
                        <td colspan="3">                  <input type="text" name="display" size="20" class="form-control" />               </td>
                        <td width="53" height="0">
                            <font color="#FFFFFF">
                                <input type="button" name="clear" value="   C   " class="btn btn-danger"
                                       onclick="myform.display.value=''" onmouseover="window.status='Limpar'" onmouseout="window.status=''" />
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td width="53" height="0">
                            <input type="button" name="seven" value="   7   " class="btn btn-default"
                                   onclick="myform.display.value+='7'" />
                        </td>
                        <td width="53" height="0">
                            <input type="button" name="eight" value="   8   " class="btn btn-default"
                                   onclick="myform.display.value+='8'" />
                        </td>
                        <td width="53" height="0">
                            <input type="button" name="nine" value="   9   " class="btn btn-default"
                                   onclick="myform.display.value+='9'" />
                        </td>
                        <td width="53" height="0">
                            <font color="#FFFFFF">
                                <input type="button" name="divide" value="÷" class="btn btn-default"
                                       onclick="myform.display.value+='/'" />
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td width="53" height="0">
                            <input type="button" name="four" value="   4   " class="btn btn-default"
                                   onclick="myform.display.value+='4'" />
                        </td>
                        <td width="53" height="0">
                            <input type="button" name="five" value="   5   " class="btn btn-default"
                                   onclick="myform.display.value+='5'" />
                        </td>
                        <td width="53" height="0">
                            <input type="button" name="six" value="   6   " class="btn btn-default"
                                   onclick="myform.display.value+='6'" />
                        </td>
                        <td width="53" height="0">
                            <font color="#FFFFFF">
                                <input type="button" name="times" value="X" class="btn btn-default"
                                       onclick="myform.display.value+='*'" />
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td width="53" height="0">
                            <input type="button" name="one" value="   1   " class="btn btn-default"
                                   onclick="myform.display.value +='1'" />
                        </td>
                        <td width="53" height="0">
                            <input type="button" name="two" value="   2   " class="btn btn-default"
                                   onclick="myform.display.value +='2'" />
                        </td>
                        <td width="54" height="0">
                            <input type="button" name="three" value="   3   " class="btn btn-default"
                                   onclick="myform.display.value +='3'" />
                        </td>
                        <td width="72" height="0">
                            <font color="#FFFFFF">
                                <input type="button" name="minus" value="–" class="btn btn-default"
                                       onclick="myform.display.value+='-'" />
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td width="53" height="0">
                            <input type="button" name="zero" value="   0   " class="btn btn-default"
                                   onclick="myform.display.value+='0'" />
                        </td>
                        <td width="53" height="0"> </td>
                        <td width="54" height="0">
                            <input type="button" name="plus" value="   +   " class="btn btn-default"
                                   onclick="myform.display.value +='+'" />
                        </td>
                        <td width="72" height="0">
                            <font color="#FFFFFF">
                                <input type="button" name="calculate" value="   =   " class="btn btn-default"
                                       onclick="myform.display.value=eval(myform.display.value)" />
                            </font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

And follow a Example in JsFiddle , for those who prefer.

    
asked by anonymous 16.04.2015 / 20:49

2 answers

1

Uses e.which instead of e.code (and note that your jsFiddle gives you an error because you have only code == ), the jQuery documentation itself suggests this. And then you can call directly: myform.display.value=eval(myform.display.value);

So the change you have to make is for 

$('input').keypress(function (e) {
    if (e.which == 13) myform.display.value = eval(myform.display.value);

jsFiddle: link

    
16.04.2015 / 21:07
1

You can also use the .trigger () function to trigger a click event on calculate button by pressing enter: 

$('input').keypress(function(e) {
            if (e.keyCode == 13) {
                $('input[name="calculate"]').trigger('click');      
            }
}

JSFiddle

    
16.04.2015 / 21:13
Make Tooltip appear when clicking inside the input How can I apply CSS to my form?