أزرار إرسال متعددة في نموذج HTML - قم بتعيين زر واحد على أنه افتراضي [مكرر

Question

هذا السؤال لديه بالفعل إجابة هنا:

• أزرار إرسال متعددة في نموذج HTML 23 إجابة

لدي نموذج يحتوي على ثلاثة أزرار إرسال على النحو التالي:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

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

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

Answer 1

اقتراحي هو عدم محاربة هذا السلوك. يمكنك تغيير الترتيب بشكل فعال باستخدام العوامات. علي سبيل المثال:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

مع:

#buttons { overflow: hidden; }
#buttons input { float: right; }

سوف يعكس الأمر بشكل فعال ، وبالتالي فإن الزر "التالي" سيكون القيمة الناتجة عن الوصول إلى Enter.

سيغطي هذا النوع من التقنيات العديد من الظروف دون الحاجة إلى اللجوء إلى المزيد من أساليب JavaScript.

Answer 2

الزر الأول هو دائما الافتراضي. لا يمكن تغييره. بينما أنت تستطيع حاول إصلاحه باستخدام JavaScript ، وسيتصرف النموذج بشكل غير متوقع في متصفح دون البرمجة النصية ، وهناك بعض حالات زاوية قابلية الاستخدام/إمكانية الوصول للتفكير فيها. على سبيل المثال ، سوف يقوم الرمز المرتبط بواسطة Zoran بإرسال النموذج بطريق الخطأ عند إدخال الضغط في أ <input type="button">, ، وهو ما لن يحدث عادة ، ولن يلتقط سلوك أي IE لتقديم النموذج الخاص بـ Enter Press على محتوى آخر غير ميداني في النموذج. لذلك إذا قمت بالنقر فوق بعض النص في <p> في النموذج مع هذا البرنامج النصي واضغط على Enter ، سيتم إرسال الزر الخاطئ ... بشكل خاص خطير إذا ، كما هو موضح في هذا المثال ، الزر الافتراضي الحقيقي هو "حذف"!

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

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(ملاحظة: يتم استخدام تحديد المواقع لضغط الزر خارج الشاشة بسبب display: none و visibility: hidden اطلب من الآثار الجانبية المتغيرة للمتصفح على ما إذا كان الزر قد تم اعتباره افتراضيًا وما إذا كان قد تم تقديمه.)

Answer 3

Quick'n'dirty يمكنك إنشاء نسخة مكررة خفية من الفتر ، والتي يجب استخدامها ، عند الضغط على Enter.

مثال CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

مثال HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

إذا قام شخص ما الآن بإدخال النموذج الخاص بك ، فسيتم استخدام الزهور التالي (المخفي) كإرسال.

تم اختباره على IE9 و Firefox و Chrome و Opera

Answer 4

جلس type=submit إلى الزر الذي ترغب في أن تكون افتراضيًا و type=button إلى أزرار أخرى. الآن في النموذج أدناه ، يمكنك الضغط على Enter في أي حقول إدخال ، و Render سوف يعمل الزر (على الرغم من حقيقة أنه الزر الثاني في النموذج).

مثال:

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

تم اختباره في FF24 و Chrome 35.

Answer 5

إذا كنت تستخدم jQuery ، فإن هذا الحل من تعليق تم إجراؤه هنا هو بقاء جميل:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

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

Answer 6

أقوم بإحياء هذا لأنني كنت أبحث عن طريقة غير جافا سكريبت للقيام بذلك. لم أكن في معالجات المفاتيح ، وكانت مواقع تحديد المواقع CSS تسبب في أمر علامات التبويب لأن إعادة تحديد موضع CSS لا يغير ترتيب علامة التبويب.

يعتمد حلي على الاستجابة في https://stackoverflow.com/a/9491141.

مصدر الحل أدناه. يتم استخدام TabIndex لتصحيح سلوك علامة التبويب للزر المخفي ، وكذلك Aria-Hidden لتجنب قراءة الزر بواسطة قراء الشاشة / التي تم تحديدها بواسطة الأجهزة المساعدة.

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

الزر الأول في زر DOM 2nd في زر DOM 3RD في DOM

CSS الأساسية لهذا الحل:

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Answer 7

حل آخر ، باستخدام jQuery:

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

يجب أن يعمل هذا على النماذج التالية ، مما يجعل "التحديث" الإجراء الافتراضي:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

إلى جانب:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

هذا الفخاخ مفتاح Enter فقط عندما يكون حقل الإدخال في النموذج له تركيز.

Answer 8

يجب ألا تستخدم أزرار تحمل نفس الاسم. إنها دلالات سيئة. بدلاً من ذلك ، يجب عليك تعديل الواجهة الخلفية للبحث عن قيم أسماء مختلفة يتم تعيينها:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

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

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

Answer 9

يحتوي حل Bobince على الجانب السلبي لإنشاء زر يمكن أن يكون فاتورة غير مدفوعة-D أكثر ، ولكن غير قابل للاستخدام. هذا يمكن أن يخلق الارتباك لمستخدمي لوحة المفاتيح.

حل مختلف هو استخدام غير معروف form ينسب:

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

هذا هو HTML القياسية, ، ومع ذلك للأسف لم يتم دعمها في Internet Explorer.