为什么输入日期似乎只有在您单击输入后才会触发该功能？

Question

我有一个接受用户输入日期的表单。我的目标是，一旦日期从空字符串变为实际填写，底部（为了继续填写表格）就会显示。我已经成功地使这成为可能，但是该功能似乎仅在用户单击输入后才运行。我希望能够做到这一点，这样用户就不必单击它，并且只要输入日期值更改它就会运行。我目前正在使用 Chrome，这还没有给我带来任何问题。

我尝试过使用带有 change 和函数的 addEventListener，我尝试过其他 html dom 事件，例如 onchange、oninput、onfocus 等，但它们似乎只有在用户点击后才会运行。我的下一个尝试是杰瑞操纵它并专注于设置超时......你有什么想法？

JS 和 HTML

function inputTodayDate(){

  let inputDate = document.getElementById("today");
  let todayRecord = document.getElementById('date').value;

  if ( todayRecord === '') {
  inputDate.style.display = "none";}
  else{
    inputDate.style.display = "block";
  }
}

<input type="date" id='date' onfocus="inputTodayDate"> <label for='date' > Today's Date </label>
<p>
<div id="today">
<input type="amount" size=25 Placeholder="How much did you spend today?" id="spent" name="today" required>
<select id="moneySpent" onchange='checkOnWhat(this.value);' name="today" required>
  <option> Groceries</option>
  <option>Going out</option>
  <option>Bills</option>
  <option>Other</option>
</select>
<input type="text" name="whatOn" id="whatOn" style='display:none;' name="today" required />
<p>
  <input type="button" value="confirm" onClick="deductFromTotal()" name="today">

  <h3 name="today"> Today's Spending: </h3>
  <div id="listTotalSpent" name="today"></div>
  <h2 id="totalSpent" name="today"></h2>

<p>
<input type='button' value= 'record' onClick= "storeWhen(); inputTodayDate()" name="today">
</p>
</div>

Answer 1

您可以使用 mouseup 和 keyup 事件来实现这一点..

let $inputField = document.getElementById("date");
let callback = function () {
  let inputDate = document.getElementById("today");
  let todayRecord = document.getElementById('date').value;

  if ( todayRecord === '') {
  inputDate.style.display = "none";}
  else{
    inputDate.style.display = "block";
  }
}
$inputField.oninput= callback;