كيف يمكنني التحقق من القيمة الجديدة لحقل النص على keypress؟

Question

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

function onkeypress(e) {
  var value = this.value;
  // do something with 
}

function onkeyup(e) {
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys
    this.onkeypress(e);
  }
}

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

أيه أفكار؟

Answer 1

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

Answer 2

هذا سهل ، فقط استخدم onkeyup بدلاً من Onkeypress

Answer 3

لديك شرطية أخرى:

if(e.keyCode > 31  && e.keyCode < 127) {
    value = this.value + e;
}

هذا من شأنه أن يجذب أي رمز ASCII منخفض المستوى الذي أدخلته لوحة المفاتيح خارج نطاق Char الخاص.

تحرير: (32 هو الفضاء)

function onkeyup(e) {        
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys 
    switch(e.keyCode) {
      case 32:
      case 48..90:
      case 96..111:
      case 188:
      case 190..192: 
      case 219..222:
          value = this.value + e;
          break;
      default: 
          break;
    }       
    this.onkeypress(e);        
  }        
}

Answer 4

إليكم الحل النهائي ، الذي يستخدم متغيرًا Premvalue ولكنه لا يلوث مساحة الاسم العالمية (نافذة) أو خصائص عنصر DOM.

(function() {
  var input = document.getElementById('input_box'),
      prevValue;

  input.onkeyup = function(e) {
    if ( this.value != prevValue ) {
      prevValue = this.value;
      // execute some more code here...
    }
  }
}());

لاحظ أعلاه أن وظيفة OnKeyup تعمل كإغلاق حول متغير Prevvalue. هذا يمنع تلوث مساحة الاسم ، لذا لا يتعين علي إنشاء متغير عالمي أو إرفاق خاصية بعنصر الإدخال نفسه. هذا أنيق بقدر ما أستطيع الحصول عليه. لقد كتبت فعليًا في jQuery لكنني اعتقدت أن الإجابة نفسها يجب أن تكون جافا سكريبت نقية ...

Answer 5

إنه نوع من الاختراق ، ولكن يمكنك وضع القيمة السابقة في خاصية من مربع النص (تسمى "سمات expenso")

function onkeypress(e) {
  this.oldvalue = this.value;
}

function onkeyup(e) {
  if (this.value != this.oldvalue) {
    // do something
  }
}

Answer 6

يمكنك تخزين القيمة القديمة والاكتشاف إذا تغيرت:

function keyUpHandle(e) {
  if (this.prevValue && this.prevValue != this.value) {
    // do something
  }
  this.prevValue = this.value;
}