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

Question

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

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

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

Answer 1

في مسج، فإن ما يلي يعمل:

$("#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>

Answer 2

وبعد ذلك فقط رمز في!

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

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

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

Answer 4

تأكد الزر لتقديم عنصر، لذلك سوف يكون تلقائيا.

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

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

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

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

Answer 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;
  }
};

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

Answer 7

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

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

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

Answer 8

جربها:

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

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

Answer 12

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

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

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

Answer 13

في <قوية> Angular2 : ل

(keyup.enter)="doSomething()"

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

وبالإضافة إلى ذلك، ليست هناك حاجة للهوية - طريقة NG2 آخر الفصل بين الرأي والنموذج

Answer 14

لا أحد لاحظ أتش تي أم أل attibute "مميزة accesskey" الذي يتوفر منذ فترة من الوقت.

وهذا هو عدم جافا سكريبت طريقة لوحة المفاتيح اختصارات المواد.

ومميزة accesskey سمات اختصارات على MDN

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

let client = navigator.userAgent.toLowerCase();
    isLinux = client.indexOf("linux") > -1;
    isWin = client.indexOf("windows") > -1;
    isMac = client.indexOf("apple") > -1;
    isFirefox = client.indexOf("firefox") > -1;
    isWebkit = client.indexOf("webkit") > -1;
    isOpera = client.indexOf("opera") > -1;
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Answer 15

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

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

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

المتصفحات المتوافقة

Answer 16

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

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

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

Answer 18

event.returnValue = false

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

وكان يعمل في إنترنت إكسبلورر وأوبرا على الأقل.

Answer 19

لمسج المحمول كان علي أن أفعل

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

Answer 20

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

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

---

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

لغة البرمجة

<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://stackoverflow.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 />";
            }
        });
    }
});

Answer 21

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();
    }
};

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

Answer 22

لتفعل ذلك مع مسج:

$("#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();
    }
});

Answer 23

في الحديث، undeprecated (بدون keyCode أو onkeydown) جافا سكريبت:

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

Answer 24

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

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

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

Answer 25

في مسج، يمكنك استخدام event.which==13. إذا كان لديك form، هل يمكن استخدام $('#formid').submit() (مع المستمعين الحدث الصحيح إضافة إلى تقديم وقال النموذج).

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

Answer 26

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

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

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