web-dev-qa-db-ja.com

HTML5 <input type =“ date”>-onChangeイベント

ユーザーがグラフィカルなカレンダーと矢印を使用する場合、またはkeybord numberを使用する場合、<input type=“date”>のイベントonChangeで検出できますか？

VanillaJSソリューションにのみ興味があります。

javascripthtml5onchange
18
Piotr Białek

このようなもの？

_function handler(e){
  alert(e.target.value);
}_
<input type="date" id="dt" onchange="handler(event);"/>
12
Theodore K.
function elog(ev, object) {
    console.log(object.id + " - " + ev + ": " + object.value); 
}
<label for="dt1">Date not initially set: </label>
<input type="date" id="dt1" 
oninput="elog('input',this);return false;"
onchange="elog('change',this);return false;"
onblur="elog('blur',this);return false;"                                         
onfocus="elog('focus',this);return false;"
onkeyup="elog('keyup-'+event.keyCode,this);return false;"
onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" />

<label for="dt2">Date set to 1.12.1892 initially: </label>
<input type="date" id="dt2" 
value="1892-12-01"
oninput="elog('input',this);return false;"
onchange="elog('change',this);return false;"
onblur="elog('blur',this);return false;"                                         
onfocus="elog('focus',this);return false;"
onkeyup="elog('keyup-'+event.keyCode,this);return false;"
onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}" />

日付ピッカーが終了したか、ユーザーによって閉じられたかどうかを判断するために、同様の問題がありました。したがって、コード例（anteloveの例の拡張）に示すように、変更、ぼかし、選択、およびフォーカスイベントをテストしました。

changeイベントは、日付ピッカーに有効な日付セットがあり、値が変更された場合にのみ発生します。 inputイベントの動作はまったく同じです。場合によっては、これは望ましくない動作を引き起こす可能性があります。有効な日付が既に設定されている場合（例：01.12.1892）、ユーザーが新しい4桁の年を入力し始めると、最初の数字を入力した後に変更イベントが既にトリガーされます（たとえば、1994 =>最初の数字を入力した後に変更イベントが表示されます「1」）。バックエンドが使用されている場合、すべての変更をサーバーに送信することは望ましくないかもしれませんが、最後に最後に選択された日付のみ（またはユーザーが中止した場合は何もありません）。

blurイベントは、入力フィールドがフォーカスを失うと発生します。これは、モバイルサファリ（iOS）に表示される日付ピッカーでも機能します。ユーザーが「完了/ OK」を押すと、選択した最終日付で作業するために使用できるぼかしイベントが発生します。また、ここでは、スピンホイールが停止し、日付コンポーネントの1つが変更されたときにchangeイベントが発生します。

興味深いことに、日付コンポーネントが変更されてもkeypressイベントは発生しませんが、keyupイベントは（すべての日付コンポーネントが設定されていなくても）発生します。不完全な日付の現在の設定値を抽出する方法を見つけていません。オプションはありますか？

質問とは関係ないが便利：キー13（リターン/エンター）をリッスンするキープレスハンドラーを追加すると、ユーザーがWebサイトで日付を入力するときにエンター/リターンキーで日付を確認できるため、キーボードを切り替える必要がない/ mouseは強制されます。

要約：はい。初期日付が設定されている（またはプロセスで完全な日付が設定されている）場合、変更イベントが処理されると、各日付コンポーネントの変更を確認できます。日付が完了したら、日付フィールドでユーザーのアクションを追跡することもできます。次に、以前の日付値と現在の日付値を比較して、「カーソル」が現在存在する場所を見つけることができます。ユーザーがクリックした日付コンポーネントが不明であるため、左/右/上/下キーの追跡は機能しないと思います。

3
holsteto

2つのイベントonchangeイベントを使用できますが、フィールドを最初に初期化する必要があります。

var date_input = document.getElementById('date_input');
date_input.valueAsDate = new Date();

date_input.onchange = function(){
   console.log(this.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id='date_input'>

お役に立てれば。

2
Zakaria Acharki

日付をYYYY-MM-DDでフォーマット

_function getObject(object)
{
//  alert(object);
//  console.log(object);
  
  console.log(object.value); // result 2019-01-03
}_
<input type="date" id="dt" onchange="getObject(this);"/>
0
antelove

はい、できますが、日時サポートについてはブラウザのサポートをご確認ください enter image description here

機能的な例をビンで確認してください！

JSBin

Chromeの場合、日付全体が入力されない限りイベントは発生しません！

0
Mr.Arjun