如何让#End输入框值始终与#Start同步？keyup事件失效求解

嘿，我明白你想要实现的效果：让id为end的时间输入框，实时跟着start框的值变化，哪怕是在键盘输入过程中（不用等失去焦点或者按键完全释放）。之前用change和keyup事件没达到预期，是因为type="time"的输入框有它的特殊性，咱们换个思路就能搞定！

直接可用的解决方案代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" value="00:00">
<input type="time" id="end" value="00:00">

<script>
$(document).ready(function() {
  // 监听input事件，捕获所有值变化的场景
  $('#start').on('input', function() {
    $('#end').val($(this).val());
  });
  
  // 兼容旧版IE的额外处理（如果不需要支持IE可以去掉）
  $('#start').on('propertychange', function() {
    $('#end').val($(this).val());
  });
});
</script>

为啥之前的方法不好用？ #

• 用change事件的问题：这个事件只有当输入框失去焦点的时候才会触发，也就是说你在start框里敲完时间，得点击页面其他地方，end框才会更新，完全做不到实时同步。
• 用keyup事件的问题：对于type="time"这种特殊输入框，很多浏览器会先验证输入的格式是否符合时间规范，只有当输入有效时才会更新输入框的value。而keyup触发的时候，浏览器可能还没完成格式验证，所以你拿到的还是旧值，看起来就像事件没生效一样。

为什么input事件是最佳选择？ #

input事件是HTML5专门用来捕获输入值变化的事件，它能覆盖所有可能改变输入框值的场景：

• 键盘输入（不管是单键输入还是连续输入）
• 右键粘贴内容
• 点击浏览器自带的时间选择器调整时间

不管你用哪种方式修改start框的时间，end框都会立刻同步，完美满足你的需求！

内容的提问来源于stack exchange，提问作者Mehdi Souregi