القضايا مع مسج .blur () و.focus () الأحداث

Question

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

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

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

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

وشكرا للمساعدة.

Answer 1

هل يمكن تحديد مهلة على الحدث طمس وإخفاء "مساعدة شعبة" على الفور فقط عندما حقل إدخال آخر هو في التركيز.

وشيء من هذا القبيل:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

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

Answer 2

و onblur، وتحديد المهلة التي ينتظر الثانية قبل باخفاء وdiv المقابلة. ثم، عند _ النقر، قم بإلغاء تحديد مهلة. وإليك مثال بسيط ...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

Answer 3

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

Answer 4

استخدم هذا الحدث mousedown، التي يطلق عندما يقوم المستخدم بالنقر فوق العنصر المساعد ولكن قبل أن يتم تشغيل الحدث طمس على عنصر المدخلات.

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});