onclick javascript




انقر فوق زر انقر مع JavaScript على مفتاح Enter في مربع نص (16)

استخدام 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

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

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

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

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

أحسب هذا:

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

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

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

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

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


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

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) 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 لتحميل بعض البيانات.


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

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


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


في سهل جافاسكريبت ،

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 صغيرة ، تعمل بشكل جيد:

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

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


لإضافة حل جافا سكريبت سهل تمامًا يعالج مشكلة @ 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 />";
            }
        });
    }
});

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

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

للقيام بذلك مع 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();
    }
});

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


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

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

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


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. لقد جربت بعض الاقتراحات ، ولكن كان لدي مشاكل. هذا يعمل على ما يرام.


event.returnValue = false

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

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





onkeypress