button onclick - انقر فوق زر انقر مع JavaScript على مفتاح Enter في مربع نص




jquery (21)

لمجرد مسج كان علي القيام به

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

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

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

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

حيلة أساسية واحدة يمكنك استخدامها لهذا لم أرها بالكامل. إذا كنت تريد تنفيذ إجراء 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>

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


للقيام بذلك مع jQuery:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

لفعل ذلك باستخدام جافا سكريبت العادي:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

استخدام keypress و event.key مع JS الحديثة!

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

Mozilla Docs

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


لإضافة حل جافا سكريبت سهل تمامًا يعالج مشكلة @ icedwater مع إرسال النموذج ، إليك الحل الكامل مع form .

ملاحظة: هذا هو "للمتصفحات الحديثة" ، بما في ذلك IE9 +. الإصدار IE8 ليس أكثر تعقيدًا ، ويمكن تعلمه هنا .

كمان: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

جافا سكريبت

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

إن محاولة التقارب هذه قريبة ، ولكنها تسيء التصرف فيما يتعلق بالمتصفح مرة أخرى ثم إلى الأمام (على Safari 4.0.5 و Firefox 3.6.3) ، لذا لا أوصي به في النهاية.

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

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

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


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

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

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

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


في Angular2 :

(keyup.enter)="doSomething()"

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

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


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

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

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

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

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


نظرًا لعدم استخدام أي شخص لـ 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 للسماح لهذه التعليمة البرمجية بالعمل (المفترض) داخل النموذج أيضًا. (سأستمر في اختبار ذلك ، وعند هذه النقطة سأقوم بإزالة المحتوى الموضوعة بين قوسين.)


جربها:

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

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

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


بالنسبة لأولئك الذين قد يحبون النهج الإيجابي و js الحديث.

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

حيث يشير الإدخال إلى متغير يحتوي على عنصر الإدخال الخاص بك.


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


event.returnValue = false

استخدمها عند التعامل مع الحدث أو في الوظيفة التي يستدعيها معالج الحدث.

وهو يعمل في Internet Explorer وأوبرا على الأقل.


قد يساعد هذا أيضًا ، وظيفة JavaScript صغيرة ، تعمل بشكل جيد:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

أعلم أن هذا السؤال قد تم حله ، لكنني وجدت شيئًا ، والذي يمكن أن يكون مفيدًا للآخرين.


document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

هيريس بلدي اثنين سنتا. أعمل على تطبيق لنظام التشغيل Windows 8 وأريد أن يقوم الزر بتسجيل حدث نقرة عندما أضغط على الزر Enter. أنا أفعل هذا في JS. لقد جربت بعض الاقتراحات ، ولكن كان لدي مشاكل. هذا يعمل على ما يرام.


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

<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();" />

جرب هذا:

$('#myText').live("keypress", function(e) {
        if (e.keyCode == 13) {
            alert("Enter pressed");
            return false; // prevent the button click from happening
        }
});

Demo





javascript button onclick onkeypress