button داخل - كيفية تشغيل زر HTML عند الضغط على Enter في مربع النص؟




صفحتين ربط (10)

إذن الشفرة التي لدي حتى الآن هي:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

إنه ليس في <form> وهو تماماً كما هو داخل <div> . ولكن عندما اكتب شيئًا في textbox يسمى "addLinks" ، أريد من المستخدم أن يكون قادرًا على الضغط على Enter وتشغيل button "linkadd" الذي سيعمل بعد ذلك على تشغيل وظيفة JavaScript.
كيف يمكنني أن أفعل هذا؟
شكر

تعديل: لم أجد هذا الرمز ، ولكن يبدو أنه لا يعمل.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});

Answers

أنا أستخدم زر كندو. هذا العمل بالنسبة لي.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>

هذا ينبغي أن نفعل ذلك ، وأنا أستخدم jQuery يمكنك كتابة جافا سكريبت عادي.
استبدل sendMessage() .

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

يعمل عندما يتم استبدال نوع الإدخال = "button" بنوع الإدخال = "submit" للزر الافتراضي الذي يحتاج إلى تشغيل.


  1. استبدل button submit
  2. كن progressive ، تأكد من وجود إصدار جانب الخادم
  3. اربط جافا سكريبت إلى معالج الإرسال الخاص بالنموذج ، وليس بمعالج click الخاص بالزر

يؤدي الضغط على enter في الحقل إلى تشغيل إرسال النموذج ، وسيتم تشغيل معالج الإرسال.


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

أبسط الحلول هو تغيير النوع إلى Submit ( type="submit " ) ،

<input type="submit" id="linkadd" name="linkadd" value="add">

ولكن هذا من شأنه أن يؤدي إلى تحديث الصفحة. إذا كان الزر يقدم طلبًا (على سبيل المثال طلب Ajax POST) ، فقد يتسبب في قطع الطلب قبل اكتماله.

الحل السهل الآخر هو إضافة هذا إلى html لحقل النص:

onkeydown="if (event.keyCode == 13)
  document.getElementById('linkadd').click()"

فمثلا:

<input type="button" id="linkadd" name="linkadd" value="add"
  onkeydown="if (event.keyCode == 13) 
      document.getElementById('linkadd').click()">

إنه 2018.

لا تستخدم keypress

  1. لا يتم تشغيل الحدث keypress عند قيام المستخدم بالضغط على مفتاح لا ينتج أي حرف ، مثل Tab و Caps Lock و Delete و Backspace و Escape و Shift و Right Shift ومفاتيح الوظائف ( F1 - F12 ).

    حدث keypress من Mozilla Developer Network

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

  2. لقد تم إهمالها.

    حدث keypress من DOM المستوى 3 - مسودة العمل W3C ، 04 أغسطس 2016 - أحداث واجهة المستخدم

    ملاحظة: يرتبط حدث keypress عادةً بالكشف عن قيمة أحرف بدلاً من مفتاح فعلي ، وقد لا يكون متاحًا على كافة المفاتيح في بعض التكوينات. تحذير: يتم تعريف نوع حدث keypress في هذه المواصفات كمرجع واكتمال ، ولكن هذه المواصفات تتوقف عن استخدام نوع الحدث هذا. عند تحرير السياقات ، يمكن للمؤلفين الاشتراك في حدث beforeinput بدلاً من ذلك.

لا تستخدم KeyboardEvent.keyCode

  1. لقد تم إهمالها.

    KeyboardEvent.keyCode من شبكة مطوري موزيلا

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

ما الذي يجب علي استخدامه بعد ذلك؟ (الممارسة الجيدة)

إصدار ES6

// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

نسخة غير ES6

// Put this code at the end of the <body>.
document.querySelector("#addLinks").addEventListener("keyup", function(event) {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

استنادًا إلى بعض الإجابات السابقة ، توصلت إلى هذا:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

نلقي نظرة على Fiddle

تعديل: إذا كنت لا ترغب في إضافة عناصر HTML إضافية ، يمكنك القيام بذلك مع JS فقط:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     

أولا وقبل كل إضافة مسج ملف مكتبة jquery وتسمية ذلك في رأس html الخاص بك.

ثم استخدم رمز jquery based ...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

يبدو أن هذا خطأ في المتصفح. مع فيريبوج لقد سجلت جميع الأحداث في المدخلات. يتم تشغيل أي أحداث عند تغيير القيمة مع مجموعة الوظائف ()؛

لقد اختبرت في فايرفوكس.

ملاحظة: إذا لم يكن خطأ، على الأقل هو تعريف خاطئ حول كيفية عمل الأحداث.





html button input textbox