Question

＆lt; p＆gt;至少在Chrome中，＆lt; code＆gt;＆lt; input type =“date＆gt; <=”“code =”“/> onchange事件会在每次更改日期的击键时触发，这意味着例如，如果您输入年份，则会在每次按键时触发。

但是，他们还没有改变日期！似乎这是oninput应该做的事情。我认为onchange是整体改变的。当我输入0,1,1,5,1,9,8,7（01/15/1997）时，那不是8变化，那就是1。

你可以说，检查价值onblur，但是即使他们只是通过字段进行选项并且它没有改变，我的事件也会触发。

我的处理程序是一个通用的ajax回发例程，它不会/不能检查旧值和新值。

是否有一个事件仅在更改时触发（但是当它们完成更改时）？

也许在onblur我可以查看旧值，但我不确定如何。

＆＃13;

<input type="date" onchange="alert('changed')">

＆＃13;

Answer 1

您可以使用这两种处理程序。使用onChange标记输入已更改，并在onBlur处理程序上，在执行您需要执行的操作之前检查它是否已更改。

Answer 2

<input type="date" id="mydate">

和Js：

let mydate=window.document.getElementById("mydate");
let olddate=mydate.value;
let isChanged = function(){
  if(mydate.value!== olddate){
    olddate=mydate.value;
    return true;
  };
  return false;
};
mydate.addEventListener("blur", function(){
  if(isChanged())
    alert("changed!");
});

Answer 3

为此，我使用了loadash去抖功能，延迟调用函数直到等待毫秒

https://www.npmjs.com/package/lodash.debounce

Answer 4

轻松去抖：

＆＃13;

let timeoutDebounce = null

function onInputChanged(){

    console.log("Keydown event")
    
    clearTimeout(timeoutDebounce)
    
    timeoutDebounce = setTimeout( () => {
        console.log("Checking the date!")
    }, 1000)
}

＆＃13;

<input onchange="onInputChanged()" type="date"/>

＆＃13;

Answer 5

onblur要求用户退出输入元素（制表符或单击以退出）。

用户暂停时，防抖动功能无济于事。例如，在1980年键入但在“ 19”之后暂停会触发以19年开始，而不是等待1980年。

如果您设置了最小/最大或其他约束，则

checkValidity（）可以工作。

<input type="date" min="1980-01-01" max="1989-12-31"
    onChange="if(this.checkValidity) console.log('I love the 80s')">

除非日期有效，否则忽略onChange。

Answer 6

好的，这就是我所做的。

我接受了彼得的答案和xale的代码，并想出了这个：

<script>
  var isDOBChanged = false;
</script>

然后在我的onblur="if(isDOBChanged) doPostBack('Driver','DOB_Change')" onchange="isDOBChanged = true;"上input，就像这样：

<input class="form-control text-box single-line" 
       data-val="true" 
       data-val-date="The field DOB must be a date." 
       data-val-required="The DOB field is required." 
       id="DOB" 
       max="2001-04-28" 
       min="1900-01-01" 
       name="DOB" 
       onblur="if(isDOBChanged) doPostBack('Driver','DOB_Change')" 
       onchange="isDOBChanged = true;" type="date" value="2000-07-18">

并且效果很好

<input type =“date＆gt; onchange激发太多

6 个答案: