Error in firefox to focus on input, after the blur of the element itself?

Question

Error in firefox to focus on input, after the blur of the element itself?

Navigation

#1 by (1 votes)

2

I need the input to be in focus after blur if it does not meet the requested value. The data of this form are dynamic are created after a query ajax , here in snippet the code worked, however in my application after blur goes to the next input.

Code sample:

$('#txtPrazo').blur(function() {
  var days = parseInt($('#txtPrazo').val());
  if (days < 1 || days > 90) {
    $('#msg_days').html('* Insira um prazo entre 1 e 90 dias').css('color', 'red');
    $('#msg_data').html('');
    $('#txtPrazo').focus();
    console.log(days);
  } else {
    var hj = new Date();
    var prazo = new Date(hj.setDate(hj.getDate() + days));
    $('#msg_days').html('Previsão ').css('color', 'black');
    $('#msg_data').html(prazo.toLocaleDateString());
  }
});

.input {
  width: 100px;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Prazo:<inputclass="input" type="number" min="1" max="90" id="txtPrazo" name="txtPrazo" value="45">
</label>
<span id="msg_days"></span><span id="msg_data"></span>
<br><br>
<label>Próximo: 
<input class="input" type="text" id="txtProx" name="txtProx">
</label>

jquery

asked by anonymous 08.03.2018 / 15:56

1 answer

How to ensure insertion and update of data in different databases AlarmManager does not run on configured

score 1 · Accepted Answer

I solved the problem as follows

I switched

$("#txtPrazo").focus();

By

setTimeout(function() {
  $("#txtPrazo").focus();
}, 0);

$('#txtPrazo').blur(function() {
  var days = parseInt($('#txtPrazo').val());
  if (days < 1 || days > 90) {
    $('#msg_days').html('* Insira um prazo entre 1 e 90 dias').css('color', 'red');
    $('#msg_data').html('');
    setTimeout(function() {
      $("#txtPrazo").focus();
    }, 0);
    console.log(days);
  } else {
    var hj = new Date();
    var prazo = new Date(hj.setDate(hj.getDate() + days));
    $('#msg_days').html('Previsão ').css('color', 'black');
    $('#msg_data').html(prazo.toLocaleDateString());
  }
});

.input {
  width: 100px;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Prazo:<inputclass="input" type="number" min="1" max="90" id="txtPrazo" name="txtPrazo" value="45">
</label>
<span id="msg_days"></span><span id="msg_data"></span>
<br><br>
<label>Próximo: 
<input class="input" type="text" id="txtProx" name="txtProx">
</label>