"<i>HTML5<\/i> HTML5<\/b><input type=“date”> <i>- onChange Event<\/i> - onChange 事件<\/b>"

Question

當用戶使用圖形日歷和箭頭<\/strong>或使用鍵盤數字<\/strong>時，是否可以在事件onChange<\/code>中檢測到<input type=“date”><\/code> ？

我只對 VanillaJS 解決方案感興趣。

Answer 1

像這樣的東西？

 function handler(e){ alert(e.target.value); }

 <input type="date" id="dt" onchange="handler(event);"/>

Answer 2

 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 示例的擴展）所示。

僅當日期選擇器設置了有效日期並且值發生更改時，才會發生更改事件。 輸入事件的行為完全相同。 在某些情況下，這可能會導致不受歡迎的行為。 當已經設置了有效日期（例如 01.12.1892）並且用戶開始輸入新的 4 位數年份時，輸入第一位數字后將觸發更改事件（例如，1994 => 輸入第一位數字后出現更改事件'1'）。 如果使用后端，可能不希望將所有更改發送到服務器，而只是將最后選擇的日期發送到服務器（如果用戶中止，則不發送）。

當輸入字段失去焦點時會觸發模糊事件。 這也適用於移動 safari (iOS) 上顯示的日期選擇器。 當用戶按下“完成/確定”時，會觸發模糊事件，該事件可用於處理所選的最終日期。 同樣，當旋轉輪停止並且日期組件之一發生更改時，更改事件也會觸發。

有趣的是，按鍵事件不會觸發時的日期分量的變化，但KeyUp事件被觸發（即使不是所有的日期組件設置）。 我還沒有找到一種方法來提取不完整日期的當前設定值。 有沒有選擇？

與問題無關但很有用：添加按鍵處理程序來偵聽鍵 13（回車/回車）非常有用，當用戶在網站上輸入日期時，他們可以通過回車/回車鍵確認日期，因此無需在鍵盤之間切換/mouse 是強制的。

總結：是的，如果設置了初始日期（或在流程中設置了完整日期）並處理了更改事件，則可以看到每個日期組件的更改。 還可以在日期完成時跟蹤日期字段中的用戶操作。 然后可以比較以前和當前的日期值，從而可以找出“光標”當前所在的位置。 我想跟蹤左/右/上/下鍵將不起作用，因為不知道用戶單擊了哪個日期組件。

基於 Alexanders 評論的 Android更新：似乎在 android 瀏覽器中，datepicker 元素仍處於選中狀態，即在關閉 datepicker 時處於焦點狀態，請參見示例。 在示例中，我單擊了日期選擇器彈出窗口中的一個日期，然后單擊了日期選擇器之外的一個區域。 之后我點擊了“清除”，再次在日期選擇器元素之外。 在所有情況下，單擊日期選擇器外（彈出窗口關閉后）都會導致模糊事件被觸發。 由於在所有情況下都會觸發更改事件，因此最好的處理方法可能是實現更改的處理程序和模糊處理程序來捕獲這兩種情況。 但要完全確定后 wimp 交互樣式（如觸摸）的行為，應測試手機上的所有瀏覽器。 如果各種移動瀏覽器的實現不同，我不會感到驚訝。

Answer 3

通常，“當用戶提交對元素值的更改時”觸發onchange 。 但是對於<input type='date'>字段，主要的瀏覽器開發人員一旦在該字段中檢測到“有效”日期就會觸發onchange ，即使您仍在輸入。 他們這樣做是為了當用戶從（特定於瀏覽器的）數據選擇器/日歷中選擇一個值時， onchange將觸發。 基本上沒有好的方法可以區分日期選擇器輸入的日期值和用戶手動輸入的日期值。

如果您使用onchange執行諸如提交表單之類的操作，這將是一個真正的問題。 您將收到帶有您不想要的值的表單提交，並且如上所述，可能是可能引發異常的錯誤數據（例如，'0002-04-02' 是一個有效的 JS 日期，但一個無效的 SQL 日期）。

我的解決方案是這樣的：

1. 將您想要的操作綁定到onchange事件
2. 關於onkeypress事件：
   1. 移除onchange綁定
   2. 將你想要的動作綁定到onblur事件
   3. 添加if (e.keyCode === 13) { doYourThing(); } if (e.keyCode === 13) { doYourThing(); }

這意味着您的字段會正確響應來自日期選擇器的onchange ，直到用戶開始手動輸入日期。 在這一點上， onchange處理程序被刪除（以防止過早觸發），而是綁定onblur （用於跳出）和keyCode === 13 （回車鍵）。

唯一的缺點是，如果用戶開始輸入日期，然后改變主意並使用數據選擇器，則onchange不會觸發並且您的操作不會發生，直到onblur或他們按下 Enter 鍵。

我知道 OP 要求純 JS，但這是我的 jQuery 版本。

$('input[type=date]').change(function () {
    this.form.submit();
});

$('input[type=date]').keypress(function (e) {
    $(this).off('change blur');

    $(this).blur(function () {
        this.form.submit();
    });

    if (e.keyCode === 13) {
        this.form.submit();
    }
});

編輯：在重新綁定之前取消綁定onblur事件，這樣您就不會獲得多個綁定事件。

Answer 4

您可以使用兩個事件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'>

希望這會有所幫助。

Answer 5

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);"/>

Answer 6

是的，您可以，但請檢查對瀏覽器的支持以獲取日期時間支持

檢查 bin 以獲取功能示例！

JSBin

在 Chrome 的情況下，除非輸入整個日期，否則不會觸發事件！

Answer 7

 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;}" />

Answer 8

不是最簡單的解決方案，但可能是最簡單的：

<input type="date" onchange="if (!this.value.startsWith('0')) yourFunction();">