Enable button event by pressing key on keyboard

Asked

Viewed 2,044 times

3

I am developing a calculator, and I need when the user presses the key enter passed on as if he were pressing the key igual.

The calculator is inside a form, then I use this code to disable the 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 button of igual, I tried to do using this code:

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

Below 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>
<link href="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>
<form name="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 follows a Example in Jsfiddle, for those who prefer.

2 answers

1


Uses the e.which in time of e.code (and notice that in your jsFiddle it is a mistake because you have only code ==), jQuery’s own documentation suggests this. And then you can call directly: myform.display.value=eval(myform.display.value);

So the change you have to make is to

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

jsFiddle: http://jsfiddle.net/LLsx4pqL/

1

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

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

Jsfiddle

Browser other questions tagged

You are not signed in. Login or sign up in order to post.