วิธีการส่งแบบฟอร์มเมื่อกดปุ่ม return?

ใครช่วยบอกวิธีส่งแบบฟอร์ม HTML เมื่อกดปุ่ม return และถ้าไม่มีปุ่มในแบบฟอร์ม ปุ่มส่งไม่ได้มี ฉันใช้ div ที่กำหนดเองแทนสิ่งนั้น

IMO นี่คือคำตอบที่ชัดเจนที่สุด:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

ยังดีกว่าถ้าคุณใช้ javascript เพื่อส่งแบบฟอร์มโดยใช้ div ที่กำหนดเองคุณควรใช้ javascript เพื่อสร้างและตั้งค่าการแสดงผล: ไม่มีสไตล์บนปุ่ม วิธีนี้ผู้ใช้ที่ปิดการใช้งานจาวาสคริปต์จะยังคงเห็นปุ่มส่งและสามารถคลิกได้

มีข้อสังเกตว่า display: none จะทำให้ IE เพิกเฉยต่ออินพุต ฉันสร้างตัวอย่าง JSFiddle ใหม่ที่เริ่มต้นเป็นรูปแบบมาตรฐานและใช้การเพิ่มประสิทธิภาพแบบก้าวหน้าเพื่อซ่อนการส่งและสร้าง div ใหม่ ฉันไม่ใช้ CSS สไตล์จากStriplingWarrior

ในการส่งแบบฟอร์มเมื่อกดปุ่ม Enter ให้สร้างฟังก์ชันจาวาสคริปต์ตามบรรทัดเหล่านี้

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

จากนั้นเพิ่มเหตุการณ์ในขอบเขตที่คุณต้องการเช่นในแท็ก div:

<div onKeyPress="return checkSubmit(event)"/>

นี่เป็นลักษณะการทำงานเริ่มต้นของ Internet Explorer 7 ด้วยเช่นกัน (อาจเป็นเวอร์ชันก่อนหน้านี้ด้วย)

ฉันลองใช้กลยุทธ์ต่างๆที่ใช้ javascript / jQuery แต่ฉันยังคงมีปัญหา ปัญหาล่าสุดที่จะเกิดขึ้นเกี่ยวข้องกับการส่งโดยไม่ได้ตั้งใจเมื่อผู้ใช้ใช้ปุ่ม Enter เพื่อเลือกจากรายการเติมข้อความอัตโนมัติในตัวของเบราว์เซอร์ ในที่สุดฉันก็เปลี่ยนมาใช้กลยุทธ์นี้ซึ่งดูเหมือนว่าจะใช้ได้กับเบราว์เซอร์ทั้งหมดที่ บริษัท ของฉันรองรับ:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

คำตอบนี้คล้ายกับคำตอบของ Chris Marasti-Georg ที่ยอมรับในปัจจุบัน แต่การหลีกเลี่ยงdisplay: noneดูเหมือนว่าจะทำงานได้อย่างถูกต้องในทุกเบราว์เซอร์

อัปเดต

ฉันแก้ไขโค้ดด้านบนเพื่อรวมค่าลบtabindexดังนั้นจึงไม่จับคีย์แท็บ แม้ว่าในทางเทคนิคจะไม่สามารถตรวจสอบความถูกต้องใน HTML 4 ได้ แต่ข้อมูลจำเพาะของ HTML5 จะรวมถึงภาษาเพื่อให้ทำงานได้ตามที่เบราว์เซอร์ส่วนใหญ่ใช้งานอยู่แล้ว

ใช้<button>แท็ก จากมาตรฐาน W3C:

ปุ่มที่สร้างด้วยฟังก์ชันองค์ประกอบ BUTTON เช่นเดียวกับปุ่มที่สร้างด้วยองค์ประกอบ INPUT แต่มีความเป็นไปได้ในการแสดงผลที่สมบูรณ์ยิ่งขึ้น: องค์ประกอบปุ่มอาจมีเนื้อหา ตัวอย่างเช่นองค์ประกอบ BUTTON ที่มีฟังก์ชันรูปภาพเช่นและอาจคล้ายกับองค์ประกอบ INPUT ซึ่งตั้งค่าประเภทเป็น "รูปภาพ" แต่องค์ประกอบประเภท BUTTON อนุญาตเนื้อหา

โดยทั่วไปมีแท็กอื่น<button>ซึ่งไม่ต้องใช้จาวาสคริปต์ที่สามารถส่งแบบฟอร์มได้ สามารถจัดรูปแบบได้มากในลักษณะของ<div>แท็ก (รวมถึง<img />ภายในแท็กปุ่ม) ปุ่มจาก<input />แท็กไม่ยืดหยุ่นเกือบเท่า

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

มีสามประเภทในการตั้งค่า<button>; พวกเขาจับคู่กับ<input>ประเภทปุ่ม

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

มาตรฐาน

• W3C wiki เกี่ยวกับ <button>
• HTML5 <button>
• HTML4 <button>

ฉันใช้ <button>แท็กกับcss- สไปรต์ และบิตของ cssจัดแต่งทรงผมเพื่อให้ได้ปุ่มแบบฟอร์มที่มีสีสันและใช้งานได้จริง โปรดทราบว่าเป็นไปได้ที่จะเขียน css ตัวอย่างเช่น<a class="button">ลิงก์จะแชร์กับการจัดรูปแบบด้วย<button>องค์ประกอบ

ฉันเชื่อว่านี่คือสิ่งที่คุณต้องการ

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

ทุกครั้งที่กดปุ่มฟังก์ชัน enter () จะถูกเรียกใช้ หากคีย์ที่กดตรงกับปุ่ม enter (13) ระบบจะเรียก sendform () และจะส่งแบบฟอร์มแรกที่พบ นี่เป็นเพียงสำหรับ Firefox และเบราว์เซอร์ที่เป็นไปตามมาตรฐานอื่น ๆ

หากคุณพบว่ารหัสนี้มีประโยชน์โปรดอย่าลืมโหวตให้ฉัน!

นี่คือวิธีที่ฉันทำกับ jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

จาวาสคริปต์อื่น ๆ ก็จะไม่แตกต่างกันเกินไป catch กำลังตรวจสอบอาร์กิวเมนต์การกดปุ่ม "13" ซึ่งเป็นคีย์ Enter

ใช้สคริปต์ต่อไปนี้

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

สำหรับแต่ละฟิลด์ที่ควรส่งแบบฟอร์มเมื่อผู้ใช้เข้ามาให้เรียกใช้ฟังก์ชัน submitenter ดังนี้

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

ฉันใช้วิธีนี้:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

โดยพื้นฐานแล้วฉันแค่เพิ่มอินพุตประเภทรูปภาพที่มองไม่เห็น (โดยที่ " spacer.gif " คือ gif แบบโปร่งใส 1x1)

ด้วยวิธีนี้ฉันสามารถส่งแบบฟอร์มนี้ด้วยปุ่ม "ส่ง" หรือเพียงแค่กด Enterบนแป้นพิมพ์

นี่แหละทีเด็ด!

ทำไมคุณไม่ใช้รูปแบบการส่ง div กับปุ่มส่ง ฉันแน่ใจว่ามีจาวาสคริปต์สำหรับสิ่งนี้ แต่จะง่ายกว่า

หากคุณใช้ asp.net คุณสามารถใช้แอตทริบิวต์defaultButtonในแบบฟอร์ม

ฉันคิดว่าคุณควรมีปุ่มส่งหรือส่งภาพจริงๆ ... คุณมีเหตุผลเฉพาะในการใช้ "ส่ง div" หรือไม่ <input type="image"...ถ้าคุณเพียงต้องการรูปแบบที่กำหนดเองผมขอแนะนำให้ http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

การขยายคำตอบนี่คือสิ่งที่ได้ผลสำหรับฉันอาจมีคนคิดว่ามันมีประโยชน์

Html

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

จส

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

คล้ายกับตัวอย่างของ Chris Marasti-Georg แทนที่จะใช้จาวาสคริปต์แบบอินไลน์ เพิ่ม onkeypress เป็นหลักในฟิลด์ที่คุณต้องการให้ปุ่ม Enter ทำงานด้วย ตัวอย่างนี้ดำเนินการในฟิลด์รหัสผ่าน

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

เนื่องจากdisplay: noneปุ่มและอินพุตใช้ไม่ได้ใน Safari และ IE ฉันจึงพบว่าวิธีที่ง่ายที่สุดโดยไม่ต้องใช้การแฮ็กจาวาสคริปต์เพิ่มเติมคือเพียงแค่เพิ่มตำแหน่งที่แน่นอน<button />ลงในแบบฟอร์มและวางไว้ให้ห่างจากหน้าจอ

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

ซึ่งใช้ได้กับเบราว์เซอร์หลักทั้งหมดในเวอร์ชันปัจจุบัน ณ เดือนกันยายน 2016

เห็นได้ชัดว่ามีการแนะนำ (และถูกต้องตามความหมายมากขึ้น) เพื่อจัดสไตล์<button/>ตามที่ต้องการ

การใช้แอตทริบิวต์ "ออโต้โฟกัส" จะทำให้อินพุตโฟกัสไปที่ปุ่มโดยค่าเริ่มต้น ในความเป็นจริงการคลิกที่ตัวควบคุมใด ๆ ภายในแบบฟอร์มยังให้ความสำคัญกับฟอร์มซึ่งเป็นข้อกำหนดสำหรับแบบฟอร์มเพื่อตอบสนองต่อการส่งคืน ดังนั้น "ออโต้โฟกัส" จะดำเนินการให้คุณในกรณีที่ผู้ใช้ไม่เคยคลิกที่ตัวควบคุมอื่นใดภายในแบบฟอร์ม

ดังนั้น "ออโต้โฟกัส" จึงสร้างความแตกต่างที่สำคัญหากผู้ใช้ไม่เคยคลิกบนตัวควบคุมฟอร์มใด ๆ ก่อนที่จะกดปุ่ม RETURN

แต่ถึงอย่างนั้นก็ยังมีเงื่อนไข 2 ข้อที่ต้องปฏิบัติตามเพื่อให้ทำงานได้โดยไม่มี JS:

a) คุณต้องระบุหน้าที่จะไป (หากปล่อยให้ว่างเปล่าจะไม่ทำงาน) ในตัวอย่างของฉันคือ hello.php

b) การควบคุมจะต้องมองเห็นได้ คุณสามารถย้ายออกจากหน้าเพื่อซ่อนได้ แต่คุณไม่สามารถใช้ display: none หรือ visibility: hidden สิ่งที่ฉันทำคือใช้สไตล์อินไลน์เพื่อเลื่อนออกจากหน้าไปทางซ้าย 200px ฉันสร้างความสูง 0px เพื่อที่จะไม่ใช้พื้นที่ เพราะไม่เช่นนั้นก็ยังสามารถขัดขวางการควบคุมอื่น ๆ ด้านบนและด้านล่างได้ หรือคุณสามารถลอยองค์ประกอบได้เช่นกัน

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>