واجهة المستخدم مسج منتقي التاريخ يفقد التركيز عند اختيار موعد مع الماوس

Question

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

1. المستخدم علامات التبويب (عن طريق مفتاح على الميدان
2. المستخدم بتحديد موعد مع الماوس
3. المستخدم علامات التبويب
4. Tabindex يبدأ في واحد (في بداية النموذج)

هنا هو رمز.(قد يكون أيضا علامة التبويب فهرس)

<input type="text" name="demo" />
<input type="text" class="date" />

مسج كود:

$(".date").datepicker();

أي اقتراحات حول كيف يمكن أن تذهب حول حل هذه المشكلة (مكافأة أقصر الحل)?

Answer 1

اشترك في onClose أو onSelect الحدث:

$("#someinput").datepicker(
{
    // other options goes here
    onSelect: function ()
    {
        // The "this" keyword refers to the input (in this case: #someinput)
        this.focus();
    }
});

أو في حالة onClose:

$("#someinput").datepicker(
{
    onClose: function ()
    {
        this.focus();
    }
});

Answer 2

شكرا على الاقتراح جيف, لقد عدلت بك onSelect وظيفة إلى استخدام السمة تصفية لاسترداد فقط العناصر مع tabindex المحدد من قبل "nexttab".

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(el).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $("[tabindex='" + nexttab + "']").focus();
      }
  });
});

PS:إذا لم يكن لديك tabindexes المحددة في التعليمات البرمجية الخاصة بك ، مثل أهملت القيام به في وقت سابق, ببساطة قم بإضافة التعليمات البرمجية التالية:

$('input, select').each(function(i, val){
    $(this).attr('tabindex', i + 1);
});

Answer 3

انظر النقاش حول هذه المشكلة في http://bugs.jqueryui.com/ticket/7266 مع الحل في http://jsfiddle.net/lankarden/9FtnW/

Answer 4

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

تحديد موعد الخيارات الافتراضية بحيث تعيين التركيز إلى أيقونة عند التقويم منبثقة يغلق:

    $(".date").datepicker({
        onClose: function() {
            $(this).next('a').focus(); 
        }
    });

إضافة علامة إلى رمز التقويم بحيث انه قابل للتركيز:

    $(".date").each(function() {
        $($(this).next('img')).wrap($("<A/>").attr("href","#"));
    });

Answer 5

إذا كنت حقا لا أهتم التبويب الذي لا وجود لها المخصصة لذلك على النحو التالي تدفق الصفحة, هل يمكن أن تفعل شيئا مثل هذا.

jQuery('.date').datepicker({
    'onSelect': function(){
        $(this).nextAll('input, button, textarea, a').filter(':first').focus();
    }
});

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

Answer 6

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

$('.date').datepicker({
   onClose: function() { this.focus(); }
});

Answer 7

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

1. يتطلب tabindex تنسب إلى مجموعة من الحقول.
2. هذا هو الصب من سلسلة الباحث في جافا سكريبت (*1).

3. هذا في الواقع يتحرك الحقل المحدد إلى العنصر التالي ، بدلا من التركيز الحالي

   $(function(){
     $(".date").datepicker({
         onSelect: function(){
             currenttab = $(this).attr("tabindex");
             nexttab = currenttab * 1 + 1;
             $(":input").each(function(){
                 if ($(this).attr("tabindex") == nexttab)
                    $(this).focus();
             });
     }
     });
   });
   

أي اقتراحات لتحسين هذه التقنية هي موضع تقدير.

Answer 8

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

A بلوق ذكر وظيفة مسج التي من شأنها أن تسمح لك لتحديد النموذج التالي عنصر على الشاشة.أنا المستوردة التي في مشروع يطلق عليه onClose من مربع الحوار منتقي التاريخ.

في حالة الارتباط يذهب ميت هنا هو وظيفة

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

ثم ببساطة يطلق عليه onClose من منتقي التاريخ

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

ويساعد هذا الأمل في المستقبل الزوار.

Answer 9

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

$(".jqDateField").datepicker('option', {
    dateFormat: 'mm/dd/y', onClose: function () {
        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
    }
});

قد تكون هناك حاجة إلى تعيين التركيز على القادم إدخال النص أكان لديك اختيار أو زر الإدخال في "الطريق"

$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')