Blur / Focus with Jquey

Asked

Viewed 48 times

0

I am doing a project that has several inputs, but I can only type in only 2 of them, so I would like my jquery to do a validation so that the user can just enter these fields, something like this:

 $("#FL1").on('blur', function () {
    if(campo == 1){
        return;
    }
    else 
        $("#FL1").focus();
 });

 $("#FL2").on('blur', function () {
    campo = 0;
 });

Is there any way to do something like this?

  • Putting the input as readonly does not solve your problem? If not, what you want the user to click the input that can not, it should be directed to another input?

  • It doesn’t solve my problem to put it as readonly. I would have a main input, that whenever I click elsewhere it will return to it, but I wish that input I could enter another so the user could type in the second input too.

1 answer

1

I don’t know if I understand very well what you want, but if you don’t want to let the user type anything in some inputs, you can use the event itself .phocus() for that reason.

To do this, simply add the inputs that cannot be typed, and in the event focus, redirect it to the main input.

An example would be like this:

$('.ignore').focus(function(e) {
  e.preventDefault();
  $('#fl1').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Principal:
<input id="fl1" />
<br/>
<br/>Ignorar:
<input class="ignore" />
<br/>Ignorar:
<input class="ignore" />
<br/>Ignorar:
<input class="ignore" />
<br/>
<br/>
<br/>Secundario:
<input id="fl2" />

Thus, all inputs with the class ignore will be directed to input with id fl1.

Editing

Based on the comments, we can use the same analogy, but the reverse. We will use document as selector, and if it is not the input’s that can be accessed, make the focus go to what you want, that way:

$(document).click(function(event) {
  if (!$(event.target).closest(".ignore").length) {
    $('#fl1').focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Principal:
<input id="fl1" class="ignore" />
<br/>
<br/>Ignorar:
<input />
<br/>Ignorar:
<input />
<br/>Ignorar:
<input />
<br/>
<br/>
<br/>Secundario:
<input id="fl2" class="ignore" />

For more information, you can look this answer.

  • If that’s not what you’re looking for, please explain better that I change the answer.

  • It was redundant the question even, it makes no sense to have field on the screen since it will not use them.

  • Thank you very much, that would be basically what I want, but when I click off the inputs it loses the field’s Focus, how can I make it so that it doesn’t occur? The question may have been bad because it would not be other inputs that I have on the screen, I actually do not want you to lose the field Focus when I click on the screen outside of my inputs...

  • @Open see if this solves your problem.

  • That’s exactly what I just did in my code... Thank you very much @Randradehelp. Hug!

  • @Thanks for nothing. Taking advantage, do the [tour] to better understand how the site works. You can vote and/or accept the answer if it helped you. If you have found a better option, you can also post to help others.

Show 1 more comment

Browser other questions tagged

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