Question

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

我希望用户在按Enter键时（在文本输入字段内）只需单击按钮而不提交表单。目前，当按下回车键时，我可以在提交表单之前看到按钮被点击一瞬间。如何制作以便某个输入区域可以单击输入并单击按钮，但按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 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

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

＆＃13;

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');
}

＆＃13;

.hidden {
  display:none;
}

＆＃13;

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

＆＃13;

如何进入单击按钮

1 个答案: