تشغيل نقرة على زر باستخدام JavaScript عند الضغط على مفتاح Enter في مربع النص

لدي حقل نص واحد وزر واحد (انظر أدناه). كيف يمكنني استخدام JavaScript لتفعيل حدث النقر للزر عند ضغط مفتاح Enter داخل مربع النص؟

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

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

الإجابة رقم 1

في jQuery، الأمور التالية ستعمل:

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

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

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

أو في جافا سكريبت العادية، سيكون التالي فعالاً:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

الإجابة رقم 2

ثم قم بترميزه فقط!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

الإجابة رقم 3

اكتشفت هذا:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

الإجابة رقم 4

اجعل الزر عنصر إرسال، حتى يكون تلقائيًا.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

لاحظ أنك ستحتاج إلى عنصر <form> يحتوي على حقول الإدخال لجعل هذا يعمل (شكراً لسيرجي إلينسكي).

ليس من الممارسات الجيدة إعادة تعريف السلوك القياسي، يجب على مفتاح Enter دائمًا استدعاء زر الإرسال في النموذج.

الإجابة رقم 5

نظرًا لأنه لم يستخدم أحد addEventListener بعد، إليكم نسختي. بالنظر إلى العناصر:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

سوف أستخدم ما يلي:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

يسمح لك هذا بتغيير نوع الحدث والإجراء بشكل منفصل مع الحفاظ على نظافة HTML.

ملاحظة أنه من المحتمل أنه من المفيد التأكد من أن هذا خارج <form> لأنه عندما وضعت هذه العناصر بداخله، كان الضغط على Enter يرسل النموذج ويعيد تحميل الصفحة. استغرق مني الأمر بضع لحظات لاكتشاف ذلك.

ملحق: بفضل تعليق من @ruffin، لقد أضفت معالج الحدث المفقود وpreventDefault للسماح لهذا الكود بالعمل (على الأرجح) داخل نموذج أيضًا. (سأقوم باختبار ذلك لاحقًا، وعندها سأزيل المحتوى الموضوع بين الأقواس.)

الإجابة رقم 6

في جافاسكريبت العادية,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

لاحظت أن الرد مُقدَّم باستخدام jQuery فقط، لذلك فكرت في تقديم شيء باستخدام JavaScript العادي أيضًا.

الإجابة رقم 7

استخدم keypress و event.key === "Enter" مع جافاسكربت الحديثة!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

مستندات موزيلا

المتصفحات المدعومة

الإجابة رقم 8

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

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

تعيين action="javascript:void(0);" بهذه الطريقة هو اختصار لمنع السلوك الافتراضي بشكل أساسي. في هذه الحالة، يتم استدعاء طريقة سواء ضغطت على Enter أو نقرت على الزر ويتم إجراء استدعاء ajax لتحميل بعض البيانات.

الإجابة رقم 9

لتفعيل البحث في كل مرة يتم فيها الضغط على مفتاح الإدخال، استخدم هذا:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

الإجابة رقم 10

JS صافي قصير يعمل

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

function doSomething() {
  console.log('💩');
}

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

الإجابة رقم 11

جرّبه:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

الإجابة رقم 12

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

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

الإجابة رقم 13

في جافاسكريبت الحديثة وغير المهملة (بدون keyCode أو onkeydown):

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

الإجابة رقم 14

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

يمكنك بعد ذلك التقاط النموذج عند الإرسال باستخدام جافاسكريبت والقيام بأي تحقق أو استدعاءات تودها.

الإجابة رقم 15

هذا حل لجميع عشاق YUI هناك:

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

في هذه الحالة الخاصة، حصلت بالفعل على نتائج أفضل باستخدام YUI لتحفيز كائنات DOM التي تم حقنها بوظائف الأزرار - لكن هذه قصة أخرى...

الإجابة رقم 16

في Angular2:

(keyup.enter)="doSomething()"

إذا كنت لا تريد بعض التغذية البصرية في الزر، فمن التصميم الجيد عدم الرجوع إلى الزر بل استدعاء وحدة التحكم مباشرة.

أيضًا، المعرف غير ضروري - طريقة أخرى في NG2 للفصل بين العرض والنموذج.

الإجابة رقم 17

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

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />