Blur / Focus with Jquey

Question

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?

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.