仅当 3 个输入都没有焦点时才运行函数 onblur [重复]答案

【问题标题】：Run a function onblur when only when none of 3 inputs have focus [duplicate]仅当 3 个输入都没有焦点时才运行函数 onblur [重复]
【发布时间】：2019-05-27 08:23:11
【问题描述】：

我需要在 HTML 表单中接受活动的开始日期为日期、月份和时间创建了 3 个单独的选择框，如下所示

我想在任何盒子上运行 onblur 函数并且应该返回 false 如果任何其他 2 个框有焦点

<script type="text/javascript">
  function chkStartDate(str) {
    var dd = document.getElementById("startDD");
    var mm = document.getElementById("startMM");
    var yy = document.getElementById("startYY");
    var err = document.getElementById("dateerr");
    var focus = document.activeElement;

    if (focus == dd || focus == mm || focus == yy) {
      err.style.display = "block";
      err.innerHTML = "Still in Focus";
      return true;
    } else {
      if (dd.value == "" || mm.value == "" || yy.value == "") {
        err.style.display = "block";
        err.innerHTML = "Invalid Start Date";
      } else {
        var d = new date();
        d.setDate(dd.value);
        d.setMonth(mm.value);
        d.setFullYear(yy.value);

        err.style.display = "block";
        err.innerHTML = !isNaN(d.valueOf());
        return true;
      }
    }
  }
</script>
<html>

<body>
  <form name=event method=post action=xxx.asp>
    <font face=Verdana Style="FONT-SIZE: 12px"><b><i>Start Date</i></b></font> &nbsp;
    <Select id=startDD name=startDD style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "dddd")>
      <Option value="">DD</option>
      <Option value="1">1</option>
      <Option value="2">2</option>
      <Option value="3">3</option>
      <Option value="4">4</option>
      <Option value="5">5</option>
      <Option value="6">6</option>
      <Option value="7">7</option>
      <Option value="8">8</option>
      <Option value="9">9</option>
      <Option value="10">10</option>
      <Option value="11">11</option>
      <Option value="12">12</option>
      <Option value="13">13</option>
      <Option value="14">14</option>
      <Option value="15">15</option>
      <Option value="16">16</option>
      <Option value="17">17</option>
      <Option value="18">18</option>
      <Option value="19">19</option>
      <Option value="20">20</option>
      <Option value="21">21</option>
      <Option value="22">22</option>
      <Option value="23">23</option>
      <Option value="24">23</option>
      <Option value="25">25</option>
      <Option value="26">26</option>
      <Option value="27">27</option>
      <Option value="28">28</option>
      <Option value="29">29</option>
      <Option value="30">30</option>
      <Option value="31">31</option>
    </Select>&nbsp;
    <Select id=startMM name=startMM style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "mmmm")>
      <Option value="">MM</option>
      <Option value="0">Jan</option>
      <Option value="1">Feb</option>
      <Option value="2">Mar</option>
      <Option value="3">Apr</option>
      <Option value="4">May</option>
      <Option value="5">June</option>
      <Option value="6">Jul</option>
      <Option value="7">Aug</option>
      <Option value="8">Sep</option>
      <Option value="9">Oct</option>
      <Option value="10">Nov</option>
      <Option value="11">Dec</option>
    </Select>&nbsp;
    <Select id=startYY name=startYY style="border:blue 1px solid;font-size:12px;font-family:verdana;color:black;" onblur=chkStartDate( "yyyy")>
      <Option value="">YYYY</option>
      <Option value="2019">2019</option>
      <Option value="2020">2020</option>
      <Option value="2021">2021</option>
      <Option value="2022">2022</option>
      <Option value="2023">2023</option>
      <Option value="2024">2024</option>
      <Option value="2025">2025</option>
    </Select>&nbsp;
    <font face=verdana style="font-size:10px"><i>(Start Date in DD/MM/YYYY Format)</i></font>
    <font style="font-size:4px"><br><br></font>

    <font face=Verdana Style="FONT-SIZE: 11px" color=red><b>
			<span id="dateerr" style="display:none"></span></b></font>

  </form>
</body>

</html>

我希望 onblur 事件仅在焦点不在 3 个选择框中的任何一个上时才验证日期（未发生）

【问题讨论】：

你点击的最后一个项目总是会获得焦点，除非你点击/点击它外面的某个地方。如果用户从年开始，然后是日，然后是月呢？它将产生两倍的错误，而用户仍在忙于填写表单。跳过模糊，只需放入一个按钮。然后在用户表示他准备好后检查。
检查一个月内的最大天数是：var d=new Date(year, month+1, 0, 0, 0, 0, 0); var max_days=d.getDate();
michel 你是 100%，我想要实现的同样的事情是，只有当焦点位于 3 个选择框中的任何一个上时才应该调用验证函数 - 现在没有 3 个选择框
请不要在一篇文章中提出多个问题。副本回答日期验证部分。另一部分应以“当 3 个输入都没有焦点时如何运行 onblur 函数”或类似标题进行询问。
将问题编辑为仅 1 个问题

标签： javascript html date

【解决方案1】：

第二点验证日期：

通过传递日期的 iso 字符串表示来创建日期对象

创建日期的 iso 字符串表示

确保这两个字符串相同

new Date("2019-04-31T00:00:00.000Z").toJSON() // "2019-05-01T00:00:00.000Z"

function validateDate(dd, mm, yyyy)
{
	dd = (dd < 10) ? "0"+dd : dd;
    mm = (mm < 10) ? "0"+mm : mm;
    yyyy = (yyyy < 100) ? "20"+yyyy : yyyy;

    var d_iso = new Date(yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z").toJSON();
    var iso = yyyy+"-"+mm+"-"+dd+"T00:00:00.000Z";

    if(d_iso === iso)
       return true;
    else
       return false;
}


console.log(validateDate(4, 2, 19)); // true
console.log(validateDate(31, 2, 19)); // false
console.log(validateDate(31, 4, 2019)); // false
console.log(validateDate(31, 3, 2019)); // true

【讨论】：

那种感觉当人们忘记new Date(Date.UTC(year, month -1, day))也是可能的..