145

テキストボックス入力でjQuery Datepickerを使用するにはどうすればよいですか:

$("#my_txtbox").datepicker({
  // options
});

ユーザーがテキストボックスにランダムなテキストを入力することを許可しません。テキストボックスがフォーカスを取得したり、ユーザーがクリックしたりしたときにDatepickerをポップアップさせたいのですが、キーボードを使用したユーザー入力(コピーと貼り付けなど)をテキストボックスに無視させたいと思います。Datepicker カレンダーからのみテキストボックスに入力したい。

これは可能ですか?

jQuery 1.2.6
デートピッカー 1.5.2

4

25 に答える 25

278

テキスト入力でreadonly属性を使用できる必要があり、jQuery は引き続きその内容を編集できます。

<input type='text' id='foo' readonly='true'>
于 2008-09-30T16:17:35.790 に答える
61

私の経験に基づいて、AdhipGuptaによって提案された解決策をお勧めします。

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

次のコードでは、ユーザーは新しい文字を入力できませんが、文字を削除することはできます

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

さらに、これにより、JavaScriptが無効になっているユーザーはフォームを使用できなくなります。

<input type="text" readonly="true" />
于 2011-10-02T07:27:15.103 に答える
13

試す

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
于 2008-09-30T16:21:26.030 に答える
10

複数の場所で日付ピッカーを再利用している場合は、次のようなものを使用して、JavaScript を介してテキスト ボックスを変更することもできます。

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

日付ピッカーを初期化する場所の直後/直前。

于 2009-11-17T11:16:11.550 に答える
6
<input type="text" readonly="true" />

ポストバック後にテキストボックスの値が失われます。

むしろ、完全に機能しているBrad8118の提案を使用する必要があります。

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

編集:IEで機能させるには、「keypress」ではなく「keydown」を使用します

于 2009-11-18T07:37:23.627 に答える
4

これを行うには 2 つのオプションがあります。(私の知る限りでは)

  1. オプション A:テキスト フィールドを読み取り専用にします。それは次のように行うことができます。

  2. オプション B:カーソルのオンフォーカスを変更します。ti をぼかしに設定します。onfocus="this.blur()"これは、日付ピッカーのテキスト フィールドに属性を設定することで実行できます 。

元: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

于 2014-11-21T08:53:01.330 に答える
4
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

jquery に readonly 属性を追加します。

于 2015-09-18T10:15:43.900 に答える
3

フォーカスを得るためにポップアップする日付ピッカー:

$(".selector").datepicker({ showOn: 'both' })

ユーザー入力が必要ない場合は、これを入力フィールドに追加します

<input type="text" name="date" readonly="readonly" />
于 2008-09-30T16:20:02.073 に答える
1

このデモでは、入力できないようにテキスト フィールドの上にカレンダーを配置することで、これを実現しています。入力フィールドを HTML で読み取り専用に設定することもできます。

<input type="text" readonly="true" />
于 2008-09-30T16:22:09.803 に答える
1

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
于 2015-02-20T09:00:46.140 に答える
0

jQuery Calendar プラグインは、少なくとも私にとっては、一般的に日付の選択に適していることがわかりました。

于 2008-09-30T16:22:15.467 に答える
0

$("#my_txtbox").prop('readonly', true)

魔法のように働いた..

于 2016-07-16T09:08:32.610 に答える
0

この質問には多くの古い回答があり、読み取り専用が一般的に受け入れられている解決策のようです。最新のブラウザーでのより良いアプローチはinputmode="none"、HTML 入力タグでを使用することだと思います。

<input type="text" ... inputmode="none" />

または、スクリプトで実行する場合は、次のようにします。

$(selector).attr('inputmode', 'none');

広範囲にテストしたわけではありませんが、私が使用した Android セットアップでは問題なく動作しています。

于 2019-04-03T09:51:31.063 に答える
0

これが解決方法であるあなたの答えです。テキストボックスコントロールでユーザー入力を制限した場合、jqueryを使用したくありません。

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>
于 2015-07-31T04:52:29.507 に答える
-1

または、たとえば、隠しフィールドを使用して値を保存することもできます...

        <asp:HiddenField ID="hfDay" runat="server" />

$("#my_txtbox").datepicker({ オプション:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
于 2012-10-17T21:50:47.453 に答える
-1

ユーザーに日付ピッカーから日付を選択させたいが、ユーザーにテキストボックス内に入力させたくない場合は、次のコードを使用します。

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});

于 2013-02-26T11:53:42.370 に答える