web-dev-qa-db-ja.com

<input>にフォーカスしているときにiphoneのデフォルトのキーボードを使用しないようにします

これは私がしようとしている方法です

<script type="text/javascript">
     $(document).ready(function(){
        $('#dateIn,#dateOut').click(function(e){
            e.preventDefault();
        }); 
     });
</script>

しかし、入力はまだiPhoneのキーボードを「起動」しています

ps：datepickerプラグインを日付に使用しているため、これを実行したい

javascriptjqueryiphonekeyboard
76
Toni Michel Caubet

入力フィールドをreadonly="true"に設定することで、だれも入力しないようにする必要がありますが、それでもクリックイベントを起動できます。

これは、日付/時刻ピッカーを使用するため、非モバイルデバイスでも役立ちます。

206
Rene Pot

DatePickerにコールバック関数を追加して、DatePickerを表示する前に入力フィールドをぼかすように指示できます。

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

注：iOSキーボードは一瞬表示されてから非表示になります。

9
nachomaans

ここで同様の質問をしたところ、素晴らしい回答が得られました。iPhoneのネイティブの日付ピッカーを使用してください。

Webページの指定された入力フィールドのiPhoneキーパッドをオフにする方法

あらすじ/擬似コード：

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

フィールドタイプを「日付」に動的に設定する理由は、それ以外の場合はOperaが独自のネイティブの日付ピッカーをポップアップするためです。

5
John Vance

私は一番上のコメントにコメントできないので、「答え」を提出せざるを得ません。

選択した回答の問題は、フィールドを読み取り専用に設定すると、iPhoneのフィールドがタブオーダーから外れることです。したがって、「次へ」を押してフォームを入力したい場合は、フィールドをスキップします。

3
John Vance

私の意見では、これを解決する最良の方法は、「ignoreReadonly」を使用することです。

最初に入力フィールドを読み取り専用にし、次にignoreReadonly：trueを追加します。これにより、テキストフィールドが読み取り専用であっても、ポップアップが表示されるようになります。

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});
2
Akbar Badhusha

以下のコードは私のために働く：

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
2
Juan Manuel De Castro

@ rene-potは正しいです。ただし、デスクトップバージョンのWebサイトには許可されていないサインが表示されます。これを回避するには、デスクトップではなくモバイルビューのみに表示されるdivにreadonly = "true"を適用します。ここでやったことを見る http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

0
DaviD.K

だからここに私の解決策があります（ジョン・ヴァンスの答えに似ています）：

まずここに行き、モバイルブラウザを検出する機能を取得します。

http://detectmobilebrowsers.com/

彼らはあなたがモバイルにいるかどうかを検出する多くの異なる方法を持っているので、あなたが使用しているもので動作するものを見つけてください。

HTMLページ（擬似コード）：

If Mobile Then
    <input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
    <input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />

JQuery：

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max  
    });
});

これにより、モバイルでネイティブの日付セレクターを使用しながら、どちらの方法でも最小日付と最大日付を設定できます。

Iosのchromeなどのモバイルブラウザが「デスクトップバージョンを要求する」場合、モバイルチェックを回避でき、キーボードが表示されないようにするため、モバイル以外のフィールドは読み取り専用にする必要があります。

ただし、フィールドが読み取り専用の場合、ユーザーはフィールドを変更できないように見えます。 CSSを変更して読み取り専用ではないように変更する（つまり、border-colorを黒に変更する）ことでこれを修正できますが、すべての入力タグのCSSを変更しない限り、全体にわたって一貫した外観を維持するのは困難ですブラウザ。

日付ピッカーにカレンダー画像ボタンを追加するだけです。 JQueryコードを少し変更するだけです。

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max,
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});

注：適切な画像を見つける必要があります。

0
Curtis