Firefox error to focus input, after element Blur itself?

Asked

Viewed 38 times

2

I need the input to stay in focus after the blur if you do not comply with the request. The data of this form are dynamic are created after a consultation ajax, here in the snippet the code worked, but in my application after blur goes to the next input.

Code example:

$('#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: 
<input class="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

  • In my browser it worked. Even copying out the snippet. Which browser are you using? And the version?

  • @Diegosantos I’m testing in firefox and Chrome in windows OS and Ubuntu and it happens the same thing, I think it must be because these js functions are in a separate file, and this form is created dynamically. But you’d have to use the same external js.

  • Um, it may be the order that js is imported. So, look at the Chrome on the tab network what the import order is. That could be it...

  • is in the following order. jquery.js | bootstrap.js and externo.js but jquery as bootstrapa.js apraecem with status 200 and external as status 304 not modified

  • Hummm, is it cache? I don’t think the snippet stores cache. For me, it’s the first time I run it. It may be that the version in your browsers is outdated. If not only debugging via browser even to know.

  • Try clearing the cache and see...

  • 1

    Clearing the cache worked on Chrome and IE, but not firefox, which can be with firefox?

  • Um, good less bad right hahaha. Can we do the same test? On mozzila also has the network tab. Take a look at the import order. Check the console for errors. If none of this works, try debugging. For example, instead of calling an event, Blur, call as a function and see step by step. if applicable, put debug; in the function to see rotating step by step

Show 3 more comments

1 answer

1


I solved the problem as follows

traded

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

For

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: 
<input class="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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.