在 datepicker 填充字段之前发生模糊事件答案

【问题标题】：Blur event happens before datepicker fills the field在 datepicker 填充字段之前发生模糊事件
【发布时间】：2019-07-04 12:23:59
【问题描述】：

我做了一个最小的例子来演示这个问题。在这里阅读了一些关于 SO 的问题/答案，我补充道

onSelect: function() {        
                    date_input.blur();
            },

到日期选择器，虽然这仍然不适合我。知道为什么吗？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/custom.css">
<link id="bsdp-css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!--  jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script type = "text/javascript">
   <!--
      function validate() {
      
         if( document.invia_dati.nome.value == "" ) {
            alert( "Please provide your name!" );
            document.invia_dati.nome.focus() ;
            return false;
         }
      }

	  function validate_field(field_id, error_id) {
		  var field = document.getElementById(field_id);
		  var perror = document.getElementById(error_id);
		  if (field.value === "") {
		    perror.style.display = "block";
		    field.style.borderColor = "red"
		    field.style.boxShadow = "1px 1px 5px red";
		  } else {
		    perror.style.display = "none";
		    field.style.borderColor = "LightGrey"
		    field.style.boxShadow = "0px 0px 0px LightGrey";
		  }
		}
   //-->

    $(document).ready(function(){
        var date_input=$('input[name="data_nascita"]'); //our date input has the name "data_nascita"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'dd/mm/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
            orientation: "top",
            onSelect: function() {        
		            date_input.blur();
		    },
        })
    })
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<title>test</title>
</head>
<body>

<div class="container">
<form class="form-horizontal" name="invia_dati" onsubmit="return(validate());">
<fieldset>


<!-- Form Name -->
<legend>Invia Dati:</legend>

<div class="form-group">
<label class="col-md-4 control-label" for="data_nascita">Data di Nascita</label>
<div class="col-md-4 date">
    <input class="form-control" id="date" name="data_nascita" placeholder="13/11/1995" type="text" onblur="return(validate_field('date', 'dob-errore'));">
    <p id="dob-errore"> Questo campo non può essere vuotο</p>  
	</div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="pob">Luogo di nascita</label>  
  <div class="col-md-4">
  <input id="pob" name="pob" type="text" placeholder="i.e. Roma" class="form-control input-md" onblur="return(validate_field('pob', 'pob-errore'));">
  <p id="pob-errore"> Questo campo non può essere vuotο</p>    
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="binvio"></label>
  <div class="col-md-8">
    <button id="binvio" name="binvio" type="submit" class="btn btn-success">Invio</button>
    <button id="bannulla" name="bannulla" type="reset" class="btn btn-inverse">Annulla</button>
  </div>
</div>

</fieldset>
</form>

</body>
</html>

【问题讨论】：

标签： javascript jquery html datepicker onblur

【解决方案1】：

正如日期选择器事件的文档中所写：https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate

您需要收听changeDate 事件！

    <!--
    function validate() {

      if (document.invia_dati.nome.value == "") {
        alert("Please provide your name!");
        document.invia_dati.nome.focus();
        return false;
      }
    }

    function validate_field(field_id, error_id) {
      var field = document.getElementById(field_id);
      var perror = document.getElementById(error_id);
      if (field.value === "") {
        perror.style.display = "block";
        field.style.borderColor = "red"
        field.style.boxShadow = "1px 1px 5px red";
      } else {
        perror.style.display = "none";
        field.style.borderColor = "LightGrey"
        field.style.boxShadow = "0px 0px 0px LightGrey";
      }
    }
    //-->

    $(document).ready(function() {
      var date_input = $('input[name="data_nascita"]'); //our date input has the name "data_nascita"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        orientation: "top"
      })
      date_input.on('changeDate', function(e) {
        date_input.blur()
      })
    })

https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/custom.css">
  <link id="bsdp-css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
  <!--  jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <!-- Bootstrap Date-Picker Plugin -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
  <title>test</title>
</head>

<body>

  <div class="container">
    <form class="form-horizontal" name="invia_dati" onsubmit="return(validate());">
      <fieldset>


        <!-- Form Name -->
        <legend>Invia Dati:</legend>

        <div class="form-group">
          <label class="col-md-4 control-label" for="data_nascita">Data di Nascita</label>
          <div class="col-md-4 date">
            <input class="form-control" id="date" name="data_nascita" placeholder="13/11/1995" type="text" onblur="return(validate_field('date', 'dob-errore'));">
            <p id="dob-errore"> Questo campo non può essere vuotο</p>
          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="pob">Luogo di nascita</label>
          <div class="col-md-4">
            <input id="pob" name="pob" type="text" placeholder="i.e. Roma" class="form-control input-md" onblur="return(validate_field('pob', 'pob-errore'));">
            <p id="pob-errore"> Questo campo non può essere vuotο</p>
          </div>
        </div>

        <!-- Button (Double) -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="binvio"></label>
          <div class="col-md-8">
            <button id="binvio" name="binvio" type="submit" class="btn btn-success">Invio</button>
            <button id="bannulla" name="bannulla" type="reset" class="btn btn-inverse">Annulla</button>
          </div>
        </div>

      </fieldset>
    </form>

</body>

</html>

【讨论】：

【解决方案2】：

您可以更改此事件，

onblur="return(validate_field('date', 'dob-errore'));"

致，onchange="return(validate_field('date', 'dob-errore'));"

也许您的问题仅与日期选择器有关？

【讨论】：