CODEWITHSUNDEEP
htmlenter
Alex Carlson
Alex Carlson

Reputation: 99

Is there a way to make an "enter" keystroke click a specific button?

So I am setting up a virtual keyboard with the following keys and input and a master button with a dynamic onclick function. I want to be able to push the enter key and hit that master button, but for some reason it wont work. When I hit the enter key, it will click the last button that I pressed

I tried using this function 

input.addEventListener("keyup", function(event) {
            event.preventDefault();
            if (event.keyCode === 13) {
                document.getElementById("MasterButton").click();
            }
        });

but it did not work. The system recognizes the keystroke, but it might also be just the default. 

<div id="VirtualKey" style="float:left">
                        <input id="btn1" type="button" onclick="input(this);" class="keypad" value="1" />
                        <input id="btn2" type="button" onclick="input(this);" class="keypad" value="2" />
                        <input id="btn3" type="button" onclick="input(this);" class="keypad" value="3" />
                        <br />
                        <input id="btn4" type="button" onclick="input(this);" class="keypad" value="4" />
                        <input id="btn5" type="button" onclick="input(this);" class="keypad" value="5" />
                        <input id="btn6" type="button" onclick="input(this);" class="keypad" value="6" />
                        <br />
                        <input id="btn7" type="button" onclick="input(this);" class="keypad" value="7" />
                        <input id="btn8" type="button" onclick="input(this);" class="keypad" value="8" />
                        <input id="btn9" type="button" onclick="input(this);" class="keypad" value="9" />
                        <br />
                        <input id="btn0" type="button" onclick="input(this);" class="keypad" value="0" />
                        <input id="btn." type="button" onclick="input(this);" class="keypad" value="." />
                        <input id="btnDel" type="button" value="DEL" onclick="del();" class="keypad"></button>
                    </div>

<div id="Master Input Section"><br><input type="number" step="0.1" id="Student"></input>

<div id="Master Button Section"><br><button type="submit" id="MasterButton" class="button" onclick="">Master</button></div>


    <script>
        function input(e) {
            // Get the TextBox object.
            var tbInput = document.getElementById("Student");

            // As e is the button, its value is the text on it.
            // Add the value to the TextBox.
            tbInput.value = tbInput.value + e.value;
        }

        function del() {
            // Get the TextBox object.
            var tbInput = document.getElementById("Student");

            // Remove the last char in the TextBox.
            tbInput.value = tbInput.value.substr(0, tbInput.value.length - 1);
        }
    </script>

Expected Results, enter key will click MasterButton

Update found error code TypeError: input.addEventListener is not a function[Learn More]

Upvotes: 1

Views: 780

Answers (2)

Justin Liu
Justin Liu

Reputation: 11

var ENTER_KEY = 13;

$(document).on('keypress', function(e) {
  var code = e.keyCode || e.which
  if (code == ENTER_KEY) {
    $("#MasterButton").trigger("click");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Alex Carlson
Alex Carlson

Reputation: 99

I have not tried using this method before hence this was weird. I scoured most a good portion of the net trying to find a way to get this to work, but thankfully I found it on another post 

<input type="number" step="0.1" id="Student" onkeydown="if (event.keyCode == 13)
                        document.getElementById('MasterButton').click()"></input>

Hope this helps someone in the near future. but this does bind the enter key on that input field to the MasterButton. Note that I only had one input field, and only 1 button that works dynamically with other sections of the code

Upvotes: 0

Related Questions