كيفية إرسال نموذج عند الضغط على مفتاح العودة؟

Question

هل يمكن لأحد أن يخبرني بكيفية إرسال نموذج HTML عند الضغط على مفتاح العودة وفي حالة عدم وجود أزرار في النموذج؟زر الإرسال غير موجود.أنا أستخدم div مخصص بدلاً من ذلك.

Answer 1

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>

والأفضل من ذلك، إذا كنت تستخدم جافا سكريبت لإرسال النموذج باستخدام div المخصص، فيجب عليك أيضًا استخدام جافا سكريبت لإنشائه، ولضبط نمط العرض: لا شيء على الزر.بهذه الطريقة سيظل المستخدمون الذين تم تعطيل جافا سكريبت يرون زر الإرسال ويمكنهم النقر عليه.

---

لقد لوحظ أن العرض: لا شيء سيؤدي إلى تجاهل IE للإدخال.لقد أنشأت أ مثال JSFiddle الجديد يبدأ كنموذج قياسي، ويستخدم التحسين التدريجي لإخفاء الإرسال وإنشاء div الجديد.لقد استخدمت تصميم CSS من StriplingWarrior.

Answer 2

لإرسال النموذج عند الضغط على مفتاح الإدخال، قم بإنشاء وظيفة جافا سكريبت على طول هذه الخطوط.

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

ثم أضف الحدث إلى أي نطاق تحتاجه، على سبيل المثال، على علامة div:

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

وهذا أيضًا هو السلوك الافتراضي لبرنامج Internet Explorer 7 على أي حال (وربما الإصدارات السابقة أيضًا).

Answer 3

لقد جربت العديد من الاستراتيجيات المستندة إلى JavaScript/jQuery، لكني ظللت أواجه مشكلات.أحدث مشكلة ظهرت تتعلق بالإرسال غير المقصود عندما يستخدم المستخدم مفتاح الإدخال للاختيار من قائمة الإكمال التلقائي المضمنة في المتصفح.لقد تحولت أخيرًا إلى هذه الإستراتيجية، والتي يبدو أنها تعمل على جميع المتصفحات التي تدعمها شركتي:

<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 تتضمن لغة لجعلها تعمل بالطريقة التي كانت تنفذها بها معظم المتصفحات بالفعل على أي حال.

Answer 4

استخدم ال <button> بطاقة شعار.من معيار W3C:

تعمل الأزرار التي تم إنشاؤها باستخدام عنصر BUTTON تمامًا مثل الأزرار التي تم إنشاؤها باستخدام عنصر INPUT، ولكنها توفر إمكانيات عرض أكثر ثراءً:قد يحتوي عنصر BUTTON على محتوى.على سبيل المثال، يعمل عنصر 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 عنه <button>
• HTML5 <button>
• HTML4 <button>

أنا أستعمل <button> العلامات مع CSS-العفاريت وقليلا من المغلق التصميم للحصول على أزرار شكل ملونة وعملية.لاحظ أنه من الممكن كتابة CSS لـ، على سبيل المثال، <a class="button"> مشاركة الروابط في التصميم مع <button> عنصر.

Answer 5

وأعتقد أن هذا هو ما تريد.

//<![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().إذا كان المفتاح الذي تم الضغط عليه يطابق مفتاح الإدخال (13)، فسيتم استدعاء sendform() وسيتم إرسال النموذج الأول الذي تم العثور عليه.هذا مخصص فقط لمتصفحات Firefox والمتصفحات الأخرى المتوافقة مع المعايير.

إذا وجدت هذا الرمز مفيدًا، فيرجى التأكد من التصويت لي!

Answer 6

إليك كيف أفعل ذلك باستخدام jQuery

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

لن تكون جافا سكريبت الأخرى مختلفة جدًا.يقوم المصيد بالتحقق من وسيطة الضغط على المفتاح "13"، وهو مفتاح الإدخال

Answer 7

استخدم البرنامج النصي التالي.

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

بالنسبة لكل حقل يجب أن يرسل النموذج عندما يضغط المستخدم على زر الإدخال، قم باستدعاء وظيفة المُرسِل كما يلي.

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

Answer 8

أستخدم هذه الطريقة:

<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 شفافة مقاس 1 × 1).

وبهذه الطريقة، يمكنني إرسال هذا النموذج إما باستخدام زر "إرسال" أو ببساطة عن طريق الضغط على إدخال على لوحة المفاتيح.

هذه هي الحيلة!

Answer 9

لماذا لا تقوم فقط بتطبيق أنماط إرسال div على زر الإرسال؟أنا متأكد من أن هناك جافا سكريبت لهذا ولكن سيكون ذلك أسهل.

Answer 10

إذا كنت تستخدم asp.net، يمكنك استخدام defaultButton السمة على النموذج.

Answer 11

أعتقد أنه يجب أن يكون لديك بالفعل زر إرسال أو صورة إرسال ...هل لديك سبب محدد لاستخدام "إرسال div"؟إذا كنت تريد فقط أنماطًا مخصصة فإنني أوصي بها <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Answer 12

على غرار مثال Chris Marasti-Georg، استخدم بدلاً من ذلك جافا سكريبت المضمنة.أضف بشكل أساسي الضغط على المفاتيح إلى الحقول التي تريد أن يعمل مفتاح الإدخال معها.يعمل هذا المثال في حقل كلمة المرور.

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

Answer 13

منذ 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/> حسب الرغبة.

Answer 14

يعمل استخدام خاصية "التركيز التلقائي" على إعطاء تركيز الإدخال للزر بشكل افتراضي.في الواقع، يؤدي النقر فوق أي عنصر تحكم داخل النموذج أيضًا إلى التركيز على النموذج، وهو شرط لكي يتفاعل النموذج مع RETURN.لذلك، يقوم "التركيز التلقائي" بذلك نيابةً عنك في حالة عدم قيام المستخدم بالنقر مطلقًا على أي عنصر تحكم آخر داخل النموذج.

لذا، فإن "التركيز التلقائي" يحدث فرقًا حاسمًا إذا لم يقم المستخدم بالنقر مطلقًا على أي من عناصر التحكم في النموذج قبل الضغط على RETURN.

ولكن حتى ذلك الحين، لا يزال هناك شرطين يجب استيفاءهما حتى يعمل هذا بدون JS:

أ) عليك تحديد صفحة للانتقال إليها (إذا تركت فارغة فلن تعمل).في المثال الخاص بي هو hello.php

ب) يجب أن يكون التحكم مرئيًا.يمكنك نقلها خارج الصفحة لإخفائها، لكن لا يمكنك استخدام العرض: لا شيء أو الرؤية: مخفي.ما فعلته هو استخدام النمط المضمّن لنقله خارج الصفحة إلى اليسار بمقدار 200 بكسل.لقد جعلت الارتفاع 0 بكسل حتى لا يشغل مساحة.لأنه بخلاف ذلك لا يزال بإمكانه تعطيل عناصر التحكم الأخرى أعلاه وأدناه.أو يمكنك تعويم العنصر أيضًا.

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