CODEWITHSUNDEEP
jqueryfirefox
WMomesso
WMomesso

Reputation: 264

Whats error focus() on firefox

My application function normality on chrome and iexplorer, but not in firefox.

I want him to return to the input if he does not answer the request.

Code example:

$('#txtTime').blur(function() {
  var days = parseInt($('#txtTime').val());
  if (days < 1 || days > 90) {
    $('#msg_days').html('* Entry value > 0 and < 90').css('color', 'red');
    $('#msg_date').html('');
    $('#txtTime').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_date').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: 
<input class="input" type="number" min="1" max="90" id="txtTime" name="txtTime" value="45">
</label>
<span id="msg_days"></span><span id="msg_date"></span>
<br><br>
<label>Próximo: 
<input class="input" type="text" id="txtProx" name="txtProx">
</label>

Upvotes: 0

Views: 30

Answers (2)

WMomesso
WMomesso

Reputation: 264

Solved

switching

$('#txtTime').focus();

per

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


$('#txtTime').blur(function() {
  var days = parseInt($('#txtTime').val());
  if (days < 1 || days > 90) {
    $('#msg_days').html('* Entry value > 0 and < 90').css('color', 'red');
    $('#msg_date').html('');
    setTimeout(function() {
    $("#txtTime").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_date').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: 
<input class="input" type="number" min="1" max="90" id="txtTime" name="txtTime" value="45">
</label>
<span id="msg_days"></span><span id="msg_date"></span>
<br><br>
<label>Próximo: 
<input class="input" type="text" id="txtProx" name="txtProx">
</label>

Upvotes: 0

Taplar
Taplar

Reputation: 24965

Forcing a focus on input seems to make this work in firefox.

$('#txtTime').blur(function() {
  var days = parseInt($('#txtTime').val());
  if (days < 1 || days > 90) {
    $('#msg_days').html('* Entry value > 0 and < 90').css('color', 'red');
    $('#msg_date').html('');
    $('#txtTime').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_date').html(prazo.toLocaleDateString());
  }
}).on('input', function(e) {
  $(e.target).focus();
});
.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: 
<input class="input" type="number" min="1" max="90" id="txtTime" name="txtTime" value="45">
</label>
<span id="msg_days"></span><span id="msg_date"></span>
<br><br>
<label>Próximo: 
<input class="input" type="text" id="txtProx" name="txtProx">
</label>

Upvotes: 1

Related Questions