ユーザー入力を許可しないテキスト入力を使用したjQuery Datepicker

https://stackoverflow.com/questions/153759

03-07-2019
|

質問

テキストボックス入力でjQuery Datepickerを使用する方法：

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

これにより、ユーザーはテキストボックスにランダムなテキストを入力できません。テキストボックスがフォーカスを取得するか、ユーザーがクリックするとDatepickerがポップアップするようにしますが、キーボードを使用したユーザー入力（copy <！> amp; pasteなど）をテキストボックスで無視します。 Datepickerカレンダーからのみテキストボックスを埋めたい。

これは可能ですか？

jQuery 1.2.6
Datepicker 1.5.2

解決

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

<input type='text' id='foo' readonly='true'>

他のヒント

私の経験に基づいて、Adhip Guptaが提案する解決策をお勧めします。

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

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

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

さらに、これにより、JavaScriptを無効にしているユーザーにはフォームが役に立たなくなります：

<input type="text" readonly="true" />

試用

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

複数の場所で日付ピッカーを再利用する場合、次のようなものを使用してJavaScript経由でもテキストボックスを変更する傾向があります。

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

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

<input type="text" readonly="true" />

テキストボックスは、ポストバック後に値を失います。

完全に機能するBrad8118の提案を使用する必要があります。

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

編集： IEで動作させるには、「keypress」ではなく「keydown」を使用します

$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

jqueryに読み取り専用属性を追加します。

日付ピッカーの初期化後：

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);

フォーカスを得たときにポップアップする日付ピッカー：

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

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

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

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

オプションA：テキストフィールドを読み取り専用にします。次のように実行できます。
オプションB：カーソルのフォーカスを変更します。 tiをぼかしに設定します。日付ピッカーのテキストフィールドに属性onfocus="this.blur()"を設定することで実行できます。

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

これに出会ったばかりなので、ここで共有しています。ここにオプションがあります

https://eonasdan.github.io/bootstrap-datetimepicker/Options/ #ignorereadonly

コードは次のとおりです。

HTML

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

フィドルは次のとおりです。

http://jsfiddle.net/matbaric/wh1cb6cy/

bootstrap-datetimepicker.jsの私のバージョンは4.17.45です

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

<input type="text" readonly="true" />

HTML

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

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}

私はこのスレッドが古いことを知っていますが、同じ問題に遭遇する他の人のために、@ Brad8118ソリューションを実装します（入力を読み取り専用にすることを選択した場合、ユーザーは日付値を削除できません彼が選択した場合はdatepickerから挿入され、ユーザーが値を貼り付けないようにする必要があります（@ErikPhilipsが必要であると示唆したように）、私はこの追加をここで許可しました。 $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });ここから https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript 私が使用する特定のスクリプト全体（代わりにfengyuanchen / datepickerプラグインを使用）：

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

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

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});

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

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

<input type="text" id="my_txtbox" readonly="true"/>

$（<！> quot; #my_txtbox <！> quot;）。prop（ 'readonly'、true）

チャームのように機能しました。

テキストボックスを使用する代わりに、ボタンも使用できます。ユーザーに手動で日付を書き込ませたくない場合に最適です。

この質問には既に回答済みで、 readonly 属性を使用することをお勧めします。
シナリオを共有して答えたいだけです。

required 属性を HTML要素に追加した後、 this 属性をとして作成できないという問題に直面しました> tab 動的に。
HTML作成時に <=> と <=> の両方として設定しようとしました。

したがって、 <=> にも設定する場合は、 <=> を使用しないことをお勧めします。

代わりに使用

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

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

これにより、 <=> キーのみを押すことができます。
バイパスするキーコードを追加できます。

<=> と <=> の両方を追加したため、以下のコードを使用します。フォームは引き続き送信されます。
<=> を削除すると、正常に機能します。

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() {
  $('#id-checkbox').change( function(){
  	$('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});

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

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

タイムピッカーのIDを置き換えます。 IDにIDofDatetimePickerを追加します。

これにより、ユーザーはそれ以上キーボード入力を行えなくなりますが、それでもユーザーは時間ポップアップにアクセスできます。

$（<！> quot; #my_txtbox <！> quot;）。keypress（function（event）{event.preventDefault（）;}）;

これを試してくださいソース： https://github.com/jonthornton/jquery-timepicker/issues/109

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

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

または、スクリプトで行う場合：

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

広範囲にテストしたことはありませんが、使用したAndroidセットアップでは正常に機能しています。

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

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

および$（<！> quot; #my_txtbox <！> quot;）。datepicker（{options：

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

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

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

});

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow