提出ボタンのないフォーム入力

Question

送信ボタンなし、1テキスト入力のフォームの場合は、入力時に提出してください。

送信ボタンがなく、複数のテキスト入力があるフォームの場合は、入力時に送信しないでください。

Enterで送信しないでください。一般

<!-- This one do submit on Enter --> 
 
<form action="/"> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
</form> 
 

 
<!-- This one do not submit on Enter --> 
 
<form action="/"> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
    <input type="text" name="lastname" value="Jerry"> 
 
</form>

Answer 1

は、暗黙の提出 メカニズムは何もしてはいけません それ以外の場合は要素自体を構成します。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

フォームはありませんsubmitボタンでどのように機能するかあなたがここに見ることができます： https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/#no-submit-buttons

Answer 2

、フォームを送信する方法として、Enterキーを抑制しても大丈夫ではありません。これを取り除くと、JavaScript用のjQueryライブラリを使用して、このような機能を実現できます（使いやすくなります）。

ここにHTMLの修正版があります。私は、Enterキーに提出していないはずの形態を識別するためのデータ属性を追加しました：

<!-- This one WILL NOT submit, when the Enter key is pressed --> 
<form action="/" data-disable-enter="1"> 
    <input type="text" name="firstname" value="Mickey"> 
</form> 

<!-- This one WILL submit, when the Enter key is pressed 
    If you want to suppress the Enter key submission, add the data attribute data-disable-enter="1" --> 
<form action="/"> 
    <input type="text" name="firstname" value="Mickey"> 
    <input type="text" name="lastname" value="Jerry"> 
</form> 

そしてここでは、Enterキーフォームの送信を抑制するためにjQueryライブラリを使用して、JavaScriptコードです。イベントリスナーは、data-disable-enter="1"というデータ属性を持つすべてのフォームの各フォーム要素（input、selectおよびtextarea）の​​イベントをリスンするために添付されています。押されたキーコードが13（which means "Enter"）の場合は、キーの押下に関連するデフォルトのアクション（この場合はフォーム提出）を防止します。フォームには、ボタンを提出している場合、フォームが ブロック暗黙の提出は、およびからフォーム要素を提出しなければならないことをつ以上のフィールドを持っている場合

jQuery("form[data-disable-enter='1']").find("input, select, textarea").on("keydown", function(e){ 
    // 13 is the key code for the Enter key 
    if(e.keyCode === 13){ 
     e.preventDefault(); 
    } 
});