Отключение свободного текста в DatePicker TextBox - но разрешение на удаление - PullRequest
Новая
       36

Отключение свободного текста в DatePicker TextBox - но разрешение на удаление

3 голосов
/ 24 января 2012

Я заметил несколько постов, которые запрещают бесплатную ввод в текстовые поля JQuery DatePicker, например, 

$("#my_txtbox").attr( 'readOnly' , 'true' );

<input type="text" name="date" readonly="readonly" />

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Но ни одна из них не позволяет вам удалять любые даты, уже заполняющие текстовое поле.Кто-нибудь знает способ сделать это?Мне также нужно сохранить значение при обратной передаче.

Большое спасибо

1 Ответ

0 голосов
/ 10 июня 2013

Лучшее решение, которое я придумал, было сделать это самостоятельно.Это занимает много шагов.Во-первых, вам нужно запретить все клавиши, кроме возврата (и, возможно, удаления) для ввода текста в DatePicker.Я сделал это с помощью следующего кода. 

$(document).keydown(function(e){ 
    var elid = $(document.activeElement).is('#yourDatepicker'); 
    if(e.keyCode === 8 && elid ){ 
        return true; //allow the backspace character
    }
    else {
        return false; //disallow all other characters
    }
});

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

Я сделал это с помощью следующего кода: 

//When you click the text box, select all text. 
$('#yourDatepicker').focus(function() {
    var $this = $(this);

    $this.select();

    window.setTimeout(function() {
        $this.select();
    }, 1);

    // Workaround for chrome
    function mouseUpHandler() {
        $this.off("mouseup", mouseUpHandler);
        return false;
    }

    $this.mouseup(mouseUpHandler);

    //When in focus, make it so the text is still selected after a click.
    $this.click(function() {
        window.setTimeout(function() {
            $this.select();
        }, 1);

        // Workaround for chrome
        function mouseUpHandler() {
            $this.off("mouseup", mouseUpHandler);
            return false;
        }   
    });
});

Иногда вам также нужно взглянуть на случай текстового поляоставаясь в фокусе после изменения даты.Я решил убрать фокус с текстового поля, но вы также можете выполнить функцию выбора, аналогичную приведенной выше.Чтобы снять фокус, вы фактически используете «onSelect» DatePicker.

Например: 

//A date change has occurred
$('#yourDatepicker').datepicker({
    stuff: 'stuff',
    morestuff: 'moreStuff',
    onSelect: function() {
      $(this).blur(); //This takes the focus off of the textbox
    }
});

Как уже говорилось ранее, вы можете заменить эту функцию той, которая используется для фокусировки / щелчкадело.Наконец, вам необходимо учесть пользователя, пытающегося вставить текст в поле.Вот мой код: 

//NO PASTES ALLOWED!!!!!
$('#yourDatepicker').bind('paste', function(e) {
    e.preventDefault();
});
...