javascript - 如何让输入点击一个按钮

Question

我的表单中有一个按钮，它只是取消隐藏一个 div，其中包含表单的提交按钮。我正在使用脚本

我希望用户在按回车键时(在文本输入字段内)只需单击按钮而不提交表单。目前，当按下 enter 键时，我可以看到按钮在提交表单之前被点击了一秒钟。我如何才能让某个输入区域可以单击回车并单击按钮，但另一个文本区域按回车提交最终表单。

我知道我可以使用这个脚本，但是它会阻止回车键处理提交表单输入。

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

这是我希望用户能够按下回车键以单击下面显示的按钮的输入。

<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>

这是显示隐藏 div 的按钮输入(我希望在上面的输入中输入时按下回车键以单击下面的这个按钮。

<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()">

这是隐藏的div input，我想要这个input上的enter键来提交表单

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

所有这些输入都在下面的形式中

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

最后是 showDiv() 函数

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

您可以将事件监听器添加到各个输入 -#twofactorcode_entry 输入将在按下 enter 时提交表单，而 .textField 输入将单击按钮。

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>