これは私がしようとしている方法です
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
しかし、入力はまだ「iPhoneのキーボードを起動」します
ps：日付にdatepickerプラグインを使用しているので、これを実行したい
回答:
入力フィールドに属性readonly（またはreadonly="readonly"）を追加することで、誰も入力できないようにする必要がありますが、それでもクリックイベントを起動することはできます。
これは、日付/時刻ピッカーを使用するため、モバイル以外のデバイスでも役立ちます
readonly、特定のウィジェットがreadonly入力のイベントをバインドしないため、使用できません。
DatePickerにコールバック関数を追加して、DatePickerを表示する前に入力フィールドをぼかすように指示できます。
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
注：iOSキーボードは、ほんの一瞬表示されてから非表示になります。
トップコメントにコメントできないので、「回答」を提出せざるを得ません。
選択した回答の問題は、フィールドを読み取り専用に設定すると、iPhoneのタブ順序からフィールドが外れることです。したがって、「次へ」を押してフォームに入力するのが好きな場合は、フィールドをスキップします。
私はここで同様の質問をし、素晴らしい答えを得ました-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がそれ以外の場合は独自のネイティブ日付ピッカーをポップアップするためです。デスクトップブラウザで一貫して日付ピッカーを表示することを想定しています。
以下のコードは私のために働きます：
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
私の意見によると、これを解決する最良の方法は、「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
});
});
<input inputmode='none'>
inputmodeグローバル属性は、要素やその内容を編集しながら、データの種類のヒントは、ユーザーが入力した可能性があること列挙属性です。次の値をとることができます。
none-仮想キーボードはありません。ページが独自のキーボード入力コントロールを実装する場合。
私はこれを正常に使用しています（Chrome / Androidでテスト済み）
だからここに私の解決策があります（ジョンヴァンスの答えに似ています）：
まずここに行き、モバイルブラウザを検出する機能を入手してください。
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
});
});
このようにして、モバイルでネイティブの日付セレクターを使用しながら、どちらの方法でも最小と最大の日付を設定できます。
chrome for iosのようなモバイルブラウザが「デスクトップバージョンを要求する」場合、モバイルチェックを回避でき、キーボードが表示されないようにする必要があるため、非モバイルのフィールドは読み取り専用にする必要があります。
ただし、フィールドが読み取り専用の場合、ユーザーはフィールドを変更できないように見える可能性があります。CSSを変更して読み取り専用ではないように見せることでこれを修正できます（つまり、境界線の色を黒に変更します）が、すべての入力タグの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"
});
});
注：適切な画像を見つける必要があります。
@ rene-potは正しいです。ただし、デスクトップバージョンのWebサイトには許可されていないサインが表示されます。これを回避するには、readonly = "true"を、デスクトップではなくモバイルビューにのみ表示されるdivに適用します。ここで行ったことをご覧くださいhttp://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/