如何使输入单击按钮

Question

I have a button in my form that simply unhides a div, which contains the submit button for the form. I am using the script

I want the user when pressing enter (whilst inside the text input field) to simply click the button and not submit the form. Currently when pressing the enter key I can see the button being clicked for a split second before the form is submitted. How do I make it so a certain input area can click enter and click the button, but another text area pressing enter submits the final form.

I know I can use this script however it stops the enter key from working on the submit form input.

window.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
    e.preventDefault();
    feedTheList();
}
});

This is the input that I want the user to be able to press enter on to click the button shown below.

<label for="userAccountName">username</label><br>
        <input class="textField" type="text" name="username" 
id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>
        <label for="userPassword">Password</label><br>
        <input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>

This is the button input that shows the hidden div (I want the enter key when inside the above input to click this button below.

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="SteamLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">

This is the hidden div input, I want the enter key on this input to submit the form

<input name="authcode" class="twofactorauthcode_entry_input 
authcode_placeholder" id="twofactorcode_entry" type="text" 
placeholder="enter your code here" autocomplete="off"/>

All of these inputs are inside of the following form

<form action="/loginaction.php" method="post" name="submit" id='submit'>

and finally the showDiv() function is

function showDiv() {
document.getElementById('SteamLogin').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
var username = document.getElementById("userAccountName").value;
document.getElementById("login_twofactorauth_message_entercode_accountname")
.innerText = username
document.getElementById('showme').style.display = "block";
document.getElementById('unhideme').style.display = "block";
},2000);

Answer 1

You could add event listeners to the individual inputs - The #twofactorcode_entry input will submit the form when enter is pressed, while the .textField inputs will click the button.

 const inputs = document.querySelectorAll('.textField'); const button = document.getElementById('SteamLogin'); const form = document.getElementById('form'); const twofactor = document.getElementById('twofactorcode_entry'); for (var i = 0; i < inputs.length; i++) { inputs[i].addEventListener('keypress', e => { if (e.key === 'Enter') { e.preventDefault(); button.click(); } }); } button.addEventListener('click', e => { // submit the form instead of showing the hidden input if the input has text // if (twofactor.value.length) form.submit(); showDiv(); }); twofactor.addEventListener('keypress', e => { if (e.key === 'Enter') { e.preventDefault(); form.submit(); alert('submitted form'); } }); function showDiv() { twofactor.classList.remove('hidden'); } 

 .hidden { display:none; } 

 <form id="form"> <label for="userAccountName">username</label><br> <input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br> <label for="userPassword">Password</label><br> <input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br> <!-- removed name="submit" so form.submit() works --> <input class="btn_green_white_innerfade btn_medium" type="button" id="SteamLogin" value="Sign in" width="104" height="25" border="0" tabindex="5"><br> <input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder hidden" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/> </form>