web-dev-qa-db-ja.com

jQuery UI日付ピッカーのフォーカスの設定を無効にする

JQuery UIの日付ピッカーには、ボタン画像がクリックされたときにのみ日付ピッカーを開くオプションがあります。次の例を参照してください。

http://jqueryui.com/demos/datepicker/#icon-trigger

問題は、日付ピッカーが開くとすぐにテキストフィールドにフォーカスが移動することです。フォーカスの設定を無効にすることはできますか？

上記のようなページをiPhoneなどのモバイルデバイスで使用すると、テキストフィールドにフォーカスが移動するため、キーボードがポップアップします。実際に日付ピッカーにアクセスして使用するにはキーボードを閉じる必要があるため、これは実際にはユーザーフレンドリーではありません...

jquerymobilejquery-mobilejquery-ui-datepicker
21
black666

入力をReadOnlyに設定します

<input type="text" id="datePicker" readonly>
46
Michal Shulman

Datepicker showOnオプションを "none"に設定することにより、望ましい結果が得られました。

$(#startdate").datepicker({
    defaultDate : "+7d",
    minDate: "+7d",
    changeMonth : true,
    changeYear : true,
    yearRange : "c:c+1",
    numberOfMonths : 1,
    showOn: "none",
    dateFormat : "dd-MM-yy",
    onClose : function(selectedDate) {
        $("#startdate").val(selectedDate);
        $( "#enddate" ).datepicker( "option", "minDate", selectedDate );
    }
});

Datepicker実装は、showOnオプションの「focus」、「button」、および「both」の値を理解します。デフォルトは「フォーカス」に設定されています。したがって、技術的にはこれら3つ以外の値を渡しても機能するはずです。ただし、デフォルトの機能がオーバーライドされると、日付ピッカーカレンダーの適切な表示を管理する責任はあなたにあります。

2
Anurag Joshi

入力を無効にすると、キーボードがポップアップすることはありません。お気に入り...

    <input type="text" id="date_picker_field" name="date" disabled/>
2
user981971

作業中のアプリケーションでも同じ問題が発生しています。カレンダーアイコンをクリックした直後にテキストフィールドに自動的にフォーカスが設定されないように、jQueryファイルからこれらの行をコメント化しました。それは私のアプリケーションでうまくいきました。

if ( $.datepicker._shouldFocusInput( inst ) ) {
    inst.input.focus();
}
1
Walt

私は縮小版v1.11.4を持っていて、jquery-ui.min.jsで2回見つかりました

datepicker._shouldFocusInput(t)&&t.input.focus()

&&t.input.focus()を削除しましたが、正常に動作します。

また興味があるかもしれません：

_shouldFocusInput:function(e){
  return e.input&&e.input.is(":visible")&&!e.input.is(":disabled")&&!e.input.is(":focus")
}

コアファイルを変更せずに修正を探しています...

1
PiTheNumber

jQuery Mobile-を使用している場合は、モバイル向けの日付ピッカーをいくつか確認することをお勧めします。ニースのカレンダービューが必要だったので、他のいくつかを試した後、実験的な jQueryUI mobile datepicker （alpha 4から）を使用しています。基本的に、既存の日付ピッカーの上に追加されたcssクラスをいくつか追加するだけです。 編集済み バージョンを使用しているため、ポップアップとして機能します。キーパッドが開かないようにするには、ピッカーが表示される前にフォーカスを受け取った直後にjQuery blurイベント$this.blur()を追加します。ぼかしイベントは、キーボードが開かないほど速く発生します。

そうでない場合-おそらく同じことをしたいと思うでしょう。私はコードを編集せずにそれを行う方法を知りません。

1
Danny C

これは古い質問ですが、同じ問題の解決策を探してつまずいた場合、私はbelieve現代のブラウザでの解決策は、HTML入力タグでinputmode="none"を使用することです。

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

私は十分にテストしていませんが、Android=で使用した設定でうまく機能しています。

1
Peter Bowers

日付ピッカーを開く前にjQueryで入力フィールドを無効にし、100ミリ秒後に有効にすることで回避策を見つけました。

$selected = $("#datepickerInput");
$selected.prop('disabled', true);
$selected.datepicker("show");
window.setTimeout(function () {
   $selected.prop('disabled', false);
}, 100);

Chromeでテストされ、またAndroid 5.1.1。

0
Bjoerg

モバイルデバイスでテスト中に日付を選択する前に、キーボード/キーパッドがポップアップするのと同じことを経験しました。内部にreadonly = "true"属性を追加しました

ただし、デスクトップビューでホバーするたびに疑問符が表示されるため、必ずCSSを編集してcursor：pointerを指定してください。

0
iamhonee