Как объединить события 'onchange' и 'blur' HTML DOM - PullRequest
Новая
       8

Как объединить события 'onchange' и 'blur' HTML DOM

1 голос
/ 07 февраля 2020

Пусть MyFunction() будет некоторой JavaScript функцией. Можно ли объединить события HTML DOM onblur и onchange (предпочтительно с использованием vanilla Javascript), чтобы MyFunction() вызывался именно тогда, когда оба события были запущены (одно сразу за другим)? Например, если у меня есть поле даты HTML5, я бы хотел, чтобы MyFunction () вызывался, когда

  1. поле даты было изменено И
  2. поле даты теряет фокус после изменения.

Мой нерабочий фрагмент кода будет выглядеть так: 

<input type="date" 'onchange onblur'="MyFunction()">

1 Ответ

2 голосов
/ 07 февраля 2020

Решение 1: Объявите глобальную переменную, которая отслеживает изменение даты, а затем сбросьте ее при размытии. 

var dateValueChanged = false;

function onChange(){
  dateValueChanged = true;
}

function onBlur(){
  if(dateValueChanged){
    //do thing
    alert('value has changed and blur');
    dateValueChanged = false;
  }
}

И HTML: 

<input type="date" onchange="onChange()" onblur="onBlur()">

https://plnkr.co/edit/xPlZ6GoSOE7wo5VrXJYz?p=preview

Решение 2 : передать элемент для замены и изменить onblur элемента в функции onchange 

function onChange(el){
  el.setAttribute("onblur", "onBlur(this)");
}

function onBlur(el){
  //do thing
  alert('value has changed and blur');
  el.setAttribute("onblur", "");
}

HTML 

<input type="date" onchange="onChange(this)">

https://plnkr.co/edit/PYQ2qITv4SZvh80cCQSM?p=preview

...