Question

如何使用Tab键选择斑马数据选择器？

    $('#datepicker').focus(function () 
    { 
        $(this).data('Zebra_DatePicker').show(); 
    )};

请提供解决方案

Answer 1

您需要首先调用在所述元素上初始化日期选择器，然后调用该函数以在焦点上显示datepicker。

虽然，有一个问题！当它显示焦点上的日历＆gt;你选择一个日期＆gt;该元素将再次引发“焦点”事件。因此，它将一直弹出，直到您使用选项卡向前移动或在其他位置单击鼠标。

以下是您的解决方案：

var calendarShown = false;
// Initialize the date picker first

$('#datepicker').Zebra_DatePicker({    
    onSelect:function(){        
        calendarShown=false;
        $(this).data('Zebra_DatePicker').hide();
    }
});

// add an event listener to focus

$(document).on('focus','#datepicker',function(){    
    if(!calendarShown){
      $(this).data('Zebra_DatePicker').show();        
        calendarShown=true;
    }    
});

为了避免一次又一次弹出日历的问题，我添加了一个变量 calendarShown 。在每个焦点上，它将检查变量是否为假并显示日历。在选择calendarShown时再次变为false，因此下次聚焦时，它会弹出日期选择器。

这是一个小提琴样本：

http://jsfiddle.net/sunnykumar08/Trr7D/

希望它有所帮助！

Datepicker无法正常工作？

1 个答案: