Как очистить текстовое поле выбора даты jQuery только для чтения?

У нас есть элемент управления выбора даты JQuery в текстовом поле только для чтения. Мы делаем текстовое поле только для чтения, чтобы пользователи не могли вводить свои даты. Это отлично работает, но мы хотим предоставить пользователям возможность очищать содержимое текстового поля после того, как они выбрали дату.

Как это сделать? Очевидно, раньше эта функция была встроена в элемент управления, но была удалена.

Примечание: мы отключаем ввод в текстовое поле, используя:

$("#text-box").keypress(function (e)
{
    e.preventDefault();
});

Обновление: я решил эту проблему, немного изменив выбранный ответ:

    myTextBox.keydown(function(e){
        if (e.keyCode == 46 || e.keyCode == 8) {
            //Delete and backspace clear text 
            $(this).val(''); //Clear text
            $(this).datepicker("hide"); //Hide the datepicker calendar if displayed
            $(this).blur(); //aka "unfocus"
        }

        //Prevent user from manually entering in a date - have to use the datepicker box
        e.preventDefault();
    });

jquery jquery-ui-datepicker
person Marcus Leon    schedule 16.12.2010    source источник
comment
вы должны были ответить на свой вопрос вместо того, чтобы обновлять рассматриваемое решение и отмечать неправильное решение как ответ. Это определенно сэкономит время многим пользователям вроде меня, которые потратили часы на реализацию вашего marked answer, а затем выяснили, что это был неправильный ответ. и правильный ответ находится под вопросом как обновление.   -  person Null Pointer    schedule 18.04.2017

Ответы (2)


arrow_upward
6
arrow_downward

Как насчет исключения ключей что пользователь использует для очистки текстового поля, такого как 'del', 'backspace' и т. д.?

$("#text-box").keypress(function (e)
{
  switch(e.keyCode) { 
          case 46:  // delete
          case 8:  // backspace
            break;
          default:
            e.preventDefault();
            break;
       }
});
person Andrew Orsich    schedule 16.12.2010
comment
На самом деле нажатие клавиши не работает для удаления и возврата. stackoverflow.com/a/1116253/2660342 - person Null Pointer; 18.04.2017

arrow_upward
2
arrow_downward 

$("#text-box").bind('keypress keydown', function (e) {
  var tag = e.target.tagName;
  if (e.which === 8 || e.which === 46) { 
    $(this).val(''); 
    $(this).datepicker("hide"); 
    $(this).blur(); 
    e.stopPropagation();
    e.preventDefault();
    return false;
  }
});

Это должно работать в браузерах, которые не запускают события нажатия клавиш для клавиш «удалить» < / а>.

person Drew Johnson    schedule 18.07.2012