Сохраняйте фокус и предотвращайте ввод символов, кроме клавиши табуляции - PullRequest
Новая
       27

Сохраняйте фокус и предотвращайте ввод символов, кроме клавиши табуляции

0 голосов
/ 07 сентября 2018

Есть ли в любом случае, что я могу сосредоточиться на элементе ввода после выбора даты в jQuery datepicker? Также есть ли способ запретить пользователю вводить что-либо, кроме включения клавиши табуляции? В настоящее время я использую метод предотвращения по умолчанию, но мне нужно только включить клавишу табуляции. Спасибо. Вот мой текущий метод. 

$('body').on('focus',".dateSem",function() {
    $(this)
      .datepicker({
        changeMonth: true,
        changeYear: true,
        changeDay: true,
        showButtonPanel: true,
        dateFormat: 'yy/MM/dd',
        showMonthAfterYear: true,
        monthNames: ["01", "02", "03", "04",
          "05", "06", "07", "08", "09", "10",
          "11", "12"
        ],
        monthNamesShort: ["1", "2", "3", "4",
          "5", "6", "7", "8", "9", "10",
          "11", "12"
        ],
        dayNamesMin: ["日", "月", "火", "水", "木",
          "金", "土"
        ],
        minDate: new Date,
        currentText: '今日を選択',
        closeText: '確定',
        onClose: function(dateText, inst) {
          $(this).datepicker(
            'setDate',
            new Date(inst.selectedYear,
              inst.selectedMonth,
              inst.selectedDay));
        }
      });
    $(this).keydown(function(e) {
      e.preventDefault();
    });

  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1 Ответ

0 голосов
/ 07 сентября 2018

Я сделал простую реализацию со следующим html (пожалуйста, не забудьте включить jquery и jqueryui) 

<label>Date pick 1</label>
<input type="text" class="mydatepicker" />
<br />
<label>Test focus</label>
<input type="text" /><br />
<label>Date pick 2</label>
<input type="text" class="mydatepicker" />
<br />
<label>Simple text to check tab focus</label>
<input type="text" />

И код JavaScript 

$('.mydatepicker')
 .keydown(function(e){
  if(e.keyCode==9){
     return true;
  }
  return false;
})
.datepicker({
  onSelect:function(date){
   $(this).focus();
  }
});

И объяснение

Вы выбираете все поля ввода с классом .mydatepicker и назначаете событие onkeydown, где вы отключаете все вводы с клавиатуры, за исключением случаев, когда код клавиши равен 9 (что означает «табуляция»)

Затем вы также преобразуете их в указатели даты и внутри функции onSelect (которая запускается после выбора пользователем даты), и вы вызываете $(this).focus(), где this - текущий элемент ввода

...