jQuery UI DatePicker는 마우스로 날짜를 선택할 때 초점을 잃습니다.

Question

DatePicker와 함께 jQuery UI를 사용하고 있으며 사용자 탭이 필드에 탭하면 캘린더가 적절하게 나타납니다.

1. 사용자 탭 (키를 통해 필드를 통해
2. 사용자는 마우스 클릭으로 날짜를 선택합니다
3. 사용자 탭
4. tabindex는 한 번에 시작됩니다 (양식의 시작 부분)

코드는 다음과 같습니다. (또한 탭 색인 세트가있을 수 있음)

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

jQuery 코드는 다음과 같습니다.

$(".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

제안 jeff에 감사드립니다. onselect 함수를 수정하여 속성 필터를 사용하여 "NextTab"으로 지정된 tabindex만으로 요소 만 검색했습니다.

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

추신 : 코드에 지정된 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 DatePicker가 닫히면 입력에 초점을 맞추는 이벤트 this 해당 콜백의 관련 입력 필드를 나타냅니다. 예를 들어:

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

Answer 7

동일한 상자에 초점을 맞추면 궁극적으로 날짜 선택기가 팝업되며 우리가 정말로 원하는 것은 다음 필드로 이동하는 것입니다. 다음은 고안된 해결책입니다.

1. TabIndex 속성을 필드에 설정해야합니다.
2. 이것은 JavaScript ( * 1)의 문자열에서 int로 캐스팅됩니다.

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

나는이 문제를 해결해야했고 주어진 답변이 내가 찾고 있던 것이 아니라는 것을 알았습니다. 여기 내가 한 일이 있습니다.

ㅏ 블로그 화면에서 다음 양식 요소를 선택할 수있는 jQuery 함수를 언급했습니다. 나는 그것을 나의 프로젝트로 가져 와서 datepicker 대화 상자의 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;
    });
};

그런 다음 간단히 DatePicker의 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) + ')')