كيفية اكتشاف الضغط أدخل على لوحة المفاتيح باستخدام JQUERY؟

https://stackoverflow.com/questions/979662

13-09-2019
|

سؤال

أود اكتشاف ما إذا كان المستخدم قد ضغط يدخل باستخدام jQuery.

كيف يكون هذا ممكنا؟ هل يتطلب البرنامج المساعد؟

تحرير: يبدو أنني بحاجة إلى استخدام keypress() طريقة.

أردت أن أعرف ما إذا كان أي شخص يعرف ما إذا كان هناك مشكلات متصفح مع هذا الأمر - هل هناك أي مشكلات توافق المتصفح يجب أن أعرفها؟

المحلول

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

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

نصائح أخرى

كتبت مكون إضافي صغير لجعله أسهل في ربط "الضغط على مفتاح الدخول المضغوط"

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

الاستعمال:

$("#input").enterKey(function () {
    alert('Enter!');
})

لم أستطع الحصول على الرمز الذي تم نشره بواسطة Paolo Bergantino للعمل ولكن عندما غيرت ذلك $(document) و e.which بدلاً من e.keyCode ثم وجدت ذلك للعمل بلا عيب.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

رابط إلى مثال على JS بن

لقد وجدت أن هذا هو أكثر متصفح متوافقا:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

يمكنك القيام بذلك باستخدام مقبض حدث مسج "Keydown"

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

قضيت وقت ما في وقت ما مع هذا الحل آمل أن يساعد شخص ما.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

هناك ضغط المفتاح() طريقة الحدث. رقم ASCII الخاص بالمفتاح ENTER هو 13 ولا يعتمد على المستعرض المستخدم.

يستخدم `event.key` وحديثي JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

أو بدون جيس:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

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

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

إن امتداد بسيط لإجابة Andrea أعلاه يجعل الطريقة المساعدة أكثر فائدة عندما ترغب أيضا في التقاط مكابس Enter المعدلة (أي CTRL-ENTER أو SHIFT-ENTER). على سبيل المثال، هذا المتغير يسمح بربط مثل:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

لتقديم نموذج عندما يضغط المستخدم على Ctrl-Enter مع التركيز على Textarea النموذج هذا.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(أنظر أيضا Ctrl + Enter JQuery في Textarea)

في بعض الحالات، قد تحتاج إلى قمع أدخل أدخل منطقة معينة من الصفحة ولكن ليس لمجالات أخرى من الصفحة، مثل الصفحة أدناه التي تحتوي على رأس <div> مع بحث ميدان.

استغرق الأمر مني لمعرفة كيفية القيام بذلك، وأوصت بمثابة هذا المثال البسيط والكامل هنا للمجتمع.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

رابط إلى ملعب JSfiddle: ال [Submit] زر لا يفعل أي شيء، ولكن الضغط أدخل من أحد عناصر التحكم في مربع النص لن يقدم النموذج.

جرب هذا للكشف عن مفتاح الدخول المضغوط.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

انظر Demo @ كشف إدخال مفتاح اضغط على لوحة المفاتيح

استخدام طريقة KeyPress للكشف عن الضغط على لوحة المفاتيح باستخدام JQUERY؟

https://www.tutsmake.com/jquery-keypress-event-dectred-key-key-pressed/

        $('#someTextBox').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert('You pressed a "enter" key in textbox'); 
            }
            event.stopPropagation();
        });

<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>Write something here & press enter</h1>
    <label>TextBox Area: </label>
    <input id="someTextBox" type="text" size="100" />
 
</body>
</html>

الطريقة السهلة للكشف عن ما إذا كان المستخدم قد ضغط Enter هو استخدام رقم المفتاح رقم المفتاح ENTER هو = 13 للتحقق من قيمة المفتاح في جهازك

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

بالضغط على مفتاح ENTER، ستحصل على نتيجة 13. باستخدام القيمة الرئيسية التي يمكنك استدعاء وظيفة أو القيام بكل ما تريد

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

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

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

آمل أن يساعد ذلك

أعتقد أن أبسط طريقة ستستخدم فانيلا Javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow

كيفية اكتشاف الضغط أدخل على لوحة المفاتيح باستخدام JQUERY؟

يستخدم event.key وحديثي JS!

يستخدم `event.key` وحديثي JS!