Problem with auto Focus

Question

Guys I created a custom input, and I can’t make autofocus work.

Follows the code:

$('.form_campos').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('focus');

$("#inputNormal3").trigger('focus');

.form_campos_simples {
  width: 250px;
}

.form-group {
  position: relative;
  display: flex;
  height: 45px;
  float: left;
  margin-right: 2px;
}

.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  z-index: 2;
}

.form-group.focused .control-label,
.form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 31px;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  background: transparent;
}

.form_campos:hover,
.form_campos:focus {
  border-color: #1E90FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='form-group'>
<label class='control-label' for='inputNormal'>NOME 1</label>
<input  type='text' class='form_campos form_campos_simples' id='inputNormal' name='nome' autofacus>
</div>

<div class='form-group'>
<label class='control-label' for='inputNormal3'>NOME 2</label>
<input  type='text' class='form_campos form_campos_simples' id='inputNormal3' name='nome' autofacus>
</div>

<div class='form-group'>
<label class='control-label' for='inputNormal'>NOME 3</label>
<input  type='text' class='form_campos form_campos_simples' id='inputNormal' name='nome' autofacus>
</div>

How can I solve this problem?

Answer 1

You are using the event blur that is invoked or invokes focus loss. To assign the focus use the event focus.

There are two ways you can call the event, can be using the trigger('focus') or only focus().

$('.form_campos').on('focus blur', function (e) {
    //...
});
$("#inputNormal").trigger('focus');

What is Blur?

Blur is the event that occurs when a inputloses focus.

What is Focus?

Focus is the event that occurs when a input gets the focus.

How to invoke or manipulate events?

• on('focus' ou 'blur', function () { }): used to change the default behavior of the event.
• focus() or blur() or trigger('focus' ou 'blur'): invokes the event for the widget.