DatePicker TextBoxのフリーテキストを無効にする - ただし、削除を許可する

Question

ここでは、JQueryのDatePickerテキストボックスにフリータイピングを無効にするいくつかの投稿を気付いた。例えば

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

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

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

ただし、既にテキストボックスに入力した日付は削除できません。誰もがこれを行う方法を知っていますか？私はまた、ポストバックの価値を維持する必要があります。

多くのお礼ありがとうございます

Answer 1

私が思いついた最善の解決策は、あなた自身で行うことでした。これには多くのステップが必要です。まず、日付ピッカーのテキスト入力に対して、バックスペースを除くすべてのキーを無効にする必要があります（おそらく同様に削除する必要があります）。私は次のコードでこれを行いました。

$(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; 
     } 
    }); 
}); 

は時々、あなたはまた、日付が変更された後、焦点に残っているテキストボックスの場合を見てする必要があります。私はテキストボックスからフォーカスを外すことにしましたが、上記と同様の選択機能を実行することもできます。フォーカスをオフにするには、実際にはdatepickerの "onSelect"を使用します。例えば

：

//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(); 
});