如何讓輸入點擊一個按鈕

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