onblur 在值改变之前触发

Question

我有两个输入是<form>. 一旦其中一个被更改（dpFin），我就会尝试获取输入的值。问题是，在事件内部，当我使用获取值时，我得到的var endDt = document.getElementById("dpFin").value;不是新值，而是旧值。我如何才能获得新设置的值？

function compararFechas() {

  var startDt = document.getElementById("dpInicio").value;

  var endDt = document.getElementById("dpFin").value;

  console.log(startDt);

  console.log(endDt);

}

<div class="form-group col-md-6">

  <label>Inicio:</label>

  <div>

    <input type="text" id="dpInicio" name="dpInicio" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly />

  </div>

</div>

<div class="form-group col-md-6">

  <label>Fin:</label>

  <div>

    <input type="text" id="dpFin" name="dpFin" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly onblur="compararFechas()" />

  </div>

</div>

Answer 1

从外观上看，您正在使用 3rd 方日期选择器，因此您的blur事件永远不会被触发。如果您检查文档，您的日期选择器上可能会有一个事件，您可以挂钩。blur当你失去将触发focus的input。使用日期选择器focus时，当日期选择器弹出时，您已经丢失了 - 因此是旧值。

Answer 2

当您不再关注该控件时会触发模糊事件，因此如果您想立即看到更改，您应该使用或oninput事件代替。但正如@Sean T 提到的，它必须是您的第 3 方日期选择器中的一个事件才能触发您想要的。