jQuery 3.3

.keyup()




jquery

.keyup (معالج) إرجاع: jQuery

الوصف ؛: ربط معالج أحداث بحدث JavaScript "keyup" ، أو تشغيل هذا الحدث على عنصر.

  • الإصدار المضاف: 1.0 .keyup (معالج)

    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.4.3 .keyup ([eventData] ، معالج)

    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.0 .keyup()

    • هذا التوقيع لا يقبل أي حجج.

هذه الطريقة هي اختصار لـ .on( "keyup", handler ) في أول .trigger( "keyup" ) ، و .trigger( "keyup" ) في الثلث.

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

على سبيل المثال ، ضع في اعتبارك HTML:

<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>

يمكن ربط معالج الحدث بمجال الإدخال:

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

الآن عندما تكون نقطة الإدراج داخل الحقل ويتم الضغط على مفتاح وتحريره ، يتم عرض التنبيه:

معالج ل .keyup () دعا.

لتشغيل الحدث يدويًا ، طبّق .keyup() بدون وسائط:

$( "#other" ).click(function() {
  $( "#target" ).keyup();
});

بعد تنفيذ هذه التعليمة البرمجية ، سيؤدي النقر فوق Trigger the handler أيضًا إلى تنبيه الرسالة.

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

لتحديد المفتاح الذي تم الضغط عليه ، قم بفحص كائن الحدث الذي تم تمريره إلى دالة المعالج. بينما تستخدم المتصفحات خصائص مختلفة لتخزين هذه المعلومات ، يقوم jQuery .which الخاصية .which بحيث يمكنك استخدامها بشكل موثوق لاسترداد رمز المفتاح. يتوافق هذا الرمز مع مفتاح على لوحة المفاتيح ، بما في ذلك الرموز الخاصة بالمفاتيح الخاصة مثل الأسهم. لالتقاط إدخال النص الفعلي ، قد يكون .keypress() خيارًا أفضل.

ملاحظات إضافية:

  • نظرًا .keyup() طريقة .keyup() هي مجرد اختصار لـ .on( "keyup", handler ) ، فإن .off( "keyup" ) ممكن باستخدام .off( "keyup" ) .

مثال:

إظهار كائن الحدث لمعالج وضع المفاتيح (باستخدام مكون .print بسيط من $) عند تحرير مفتاح في الإدخال.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keyup demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
 
<script>
var xTriggered = 0;
$( "#target" ).keyup(function( event ) {
  xTriggered++;
  var msg = "Handler for .keyup() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
}).keydown(function( event ) {
  if ( event.which == 13 ) {
    event.preventDefault();
  }
});
 
$( "#other").click(function() {
  $( "#target" ).keyup();
});
</script>
 
</body>
</html>

عرض: