Problem with auto focus

Navigation
1

I've created a custom input, and I can not make the autofocus work.

Follow 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 resolve this problem?

    
asked by anonymous 29.02.2016 / 15:39

1 answer

3

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

There are two ways you can call the event, either by using trigger('focus') or even focus() . 

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

What is blur?

Blur is the event that occurs when a input loses focus.

What is focus?

Focus is the event that occurs when a input receives 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 even trigger('focus' ou 'blur') : invokes the event for the element.
29.02.2016 / 15:58
Problems in hibernate update Copy string from a position