ボタンをクリックして入力する方法

Question

フォームの送信ボタンが含まれているdivを単に非表示にするボタンがフォームにあります。私はスクリプトを使用しています

ボタンをクリックしてフォームを送信しないで、Enterキー（テキスト入力フィールド内）を押してもらいたいです。現在、エンターキーを押すと、フォームが送信される前にクリックされたボタンが1秒間にクリックされたことがわかります。特定の入力領域が入力をクリックしてボタンをクリックできるようにするにはどうすればよいですか？Enterを押す別のテキスト領域は最終フォームを提出します。

私はこのスクリプトを使用することができますが、入力キーが入力フォーム入力の作業を停止することはわかっています。

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

これは、私は、ユーザーが次のボタンをクリックして上のEnterキーを押すことができるようにしたい入力されています。

<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

であるあなたは、個々の入力にイベントリスナーを追加することができます - 入力が押されたときに.textField入力がクリックする一方 #twofactorcode_entry入力は、フォームを送信しますボタン。

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>