1

Galera criei um input personalizado, e não consigo fazer o autofocus funcionar.

Segue o código:

$('.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>

Como posso resolver esse problema?

2
  • Troca o trigger('blur') por trigger('focus') Commented 29/02/2016 às 14:42
  • 1
    @PedroCamaraJunior faça uma resposta, mesmo que curta isso parece que resolve o problema ;)
    – Syzoth
    Commented 29/02/2016 às 14:46

1 Resposta 1

3

Você está utilizando o evento blur que é invocado ou invoca a perda do foco. Para atribuir o foco utilize o evento focus.

Há duas maneiras de você chamar o evento, pode ser utilizando o trigger('focus') ou ainda somente focus().

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

O que é blur?

Blur é o evento que ocorre quando um inputperde o foco.

O que é focus?

Focus é o evento que ocorre quando um input recebe o foco.

Como invocar ou manipular os eventos?

  • on('focus' ou 'blur', function () { }): utilizado para alterar o comportamento padrão do evento.
  • focus() ou blur() ou ainda trigger('focus' ou 'blur'): invoca o evento para o elemento.
3
  • ok, o problema e que coloquei apenas um input para exemplo. E como faço isso em um formulário cheio de input que utilizam esse jquey? como irei dar focus em um input expecifico ? Commented 29/02/2016 às 16:07
  • 1
    Basta acessar o input utilizando jQuery e invocar o evento como mencionei acima, por exemplo, acessar o elemento pela sua id: $("#meuInput").focus() ou $("#meuInput").trigger('focus'). Commented 29/02/2016 às 16:12
  • 1
    ok deu certo muito obrigado, vou editar minha pergunta aqui Commented 29/02/2016 às 16:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .