コードタイプアプリの入力タイプに関する問題

Question

input type=dateを使用して、ユーザから日付を取得しています。我々は、入力（タイプ=日）のプレースホルダを持つことができないので、私は次のことを行っている：

• を、焦点に、日付に種類を変更するプレースホルダJSで
• とテキストを入力して入力フィールドを作成し
IOSでは

$("#datefield").on('focus', function() { $("#datefield").attr('type', 'date'); })

、これは完全に正常に動作し、私は、入力フィールドをタップネイティブDatePickerの毎回をもたらしています。 しかし、アンドロイドでは、それはネイティブのdatepickerをもたらしますが、私は2回クリックする必要があります。デバッグの後、まずフォーカスイベントを調べ、タイプを日付に変更します。 2回目のクリックでは、イベントを通過することはありませんが、ネイティブキーボードが表示されます。その後、私はそのページに滞在している限り、タイプが日付に変更されているので、ワンクリックでネイティブの日付ピッカーが表示されます。

私はそれを正しく処理していますか？私は間違って何をしていますか？それを行うより良い方法はありますか？

P.S.私はできる限りプラグインを避けたい。私は、HTML、CSS、JS、Jqueryを使用しています

Answer 1

テキストフィールドを日付フィールドに変更するには、onfocus属性を使用してください。私はこれがあなたの役に立てば幸い

...

<input placeholder="Date" type="text" onfocus="(this.type='date')" id="date"> 

または使用jqueryの

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() { 
 
    var el = this, type = $(el).attr('type'); 
 
    if ($(el).val() == '') $(el).attr('type', 'text'); 
 
    $(el).focus(function() { 
 
     $(el).attr('type', type); 
 
     el.click(); 
 
    }); 
 
    $(el).blur(function() { 
 
     if ($(el).val() == '') $(el).attr('type', 'text'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input name="date" type="date" placeholder="Date">