1

Galera montei um sistema de input com o mesmo layout do android.

Tudo funciona perfeitamente no input parcelas, porém o input fornecedor fica dentro de uma div, pois tenho que adicionar um botão no lugar do x.

O problema e que quando fico com o mouse sobre ele o alinha border fica azul, e quando saio ela volta a ficar preta.

Preciso deixar ela igual ao input parcelas, ou seja quando for clicada tem que ficar azul independente se o mouse esta sobre ela ou não.

Segue o meu código:

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

$('.form_campos_box').on('focus blur', function(e) {
  $(this).parents('.box').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');
body {
  font-family: Verdana;
  font-size: 12px;
}

.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 {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 20px;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  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;
}

.form_campos_numeros {
  width: 123px;
}



/* BOX INPUT E BOTAO */

.box {
  width: 250px;
  display: flex;
  height: 44px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}

.box input {
  outline: 0;
  width: 230px;
  height: 20px;
  border: 0;
  background: transparent;
}

.box_bt {
  margin-top: 28px;
  cursor: pointer;
}

.box_bt:hover {
  color: #1E90FF;
}

.box:hover {
  border-color: #1E90FF;
}

.box.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos_box {
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  position: relative;
  display: block;
  outline: none;
}
/* FIM BOX INPUT E BOTAO */
<div class='form-group'>
  <label class='control-label' for='numParcelas'>PARCELAS*</label>
  <input type='text' class='form_campos form_campos_numeros' id='numParcelas' name='numParcelas'>
</div>

<br><br><br><br><br><br>

<div class='box'>
  <label class='control-label' for='auto'>FORNECEDOR*</label>
  <input type='text' class='form_campos_box' id='auto' name='nome'>
  <div class="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>

JSFiddle

2
  • Atribui diretamente no CSS o :focus ao input, sem jQuery. Exemplo: jsfiddle.net/ojgdkjtc
    – Ricardo
    19/02/2016 às 11:34
  • ai não da certo, preciso manter o layout que montei 19/02/2016 às 11:48

4 Respostas 4

1

Você pode criar uma div que possa ser focada se você atribuir um tabindex nela.

Por ter um indicador tipo index, ou seja, por índice, sendo 0 o primeiro item, o atributo tabindex de valor "0" é o padrão.
Dica: você pode atribuir o valor "-1" para um tabindex, porém ele só poderá ser focado via código e nunca pelo usuário.

HTML

<div>Elemento sem tabindex (não focável)</div>
<div tabindex="0">Elemento normal (focável por script ou pelo clique/usuário)</div>
<div tabindex="-1" id="scripted">Elemento não focável pelo usuário (focável pelo script)</div>
<div id="test">Setar foco</div>

CSS

<style>
div:focus {
    background-color: Aqua;
}
</style>

Javascript

<script>
document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};
</script>

<div>1) Elemento sem tabindex (não focável)</div>
<div tabindex="0">2) Elemento normal (focável por script ou pelo clique/usuário)</div>
<div tabindex="-1" id="scripted">3) Elemento não focável pelo usuário (focável pelo script)</div>
<button id="foco">Focar elemento 3</button>


<style>
  div:focus {
    background-color: Aqua;
  }
</style>


<script>
  document.getElementById('foco').onclick = function() {
    document.getElementById('scripted').focus();
  };
</script>

Espero que isso te ajude em alguma coisa ou sirva para seu projeto!

Links úteis:
"How to focus div?" em Stackoverflow.com
"Change focus into particular div" em Stackoverflow.com
"Tabindex | HTML" em Mozilla Developer Network

3
  • bom tentei fazer desta forma, porem quanto clico no input dentro da div ela não fica selecionada. seque o código para vc ver jsfiddle.net/fcfhxznb 19/02/2016 às 13:08
  • @Hugo, você precisa atribuir o método em um botão ou em outro evento. No meu código, atribuí um botão e no evento onclick ele chamava o método pelo atributo id do botão.
    – vinibrsl
    19/02/2016 às 20:57
  • tem com vc me mandar um exemplo pelo jsfiddle, com o código que postei no meu comentário anterior. 22/02/2016 às 11:37
0

Hugo, a solução aqui é bem simples, você deve passar a ver cada um destes conjunto de elementos como um componente, por exemplo os elementos abaixo:

<div class='box'>
  <label class='control-label' for='auto'>FORNECEDOR*</label>
  <input type='text' class='form_campos_box' id='auto' name='nome'>
  <div class="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>

ao meu ver, label[for='auto'], input#auto e o i.demon-icon formam um unico componente, e todos são agrupados pela div.box

neste caso é interresante que ações em qual quer um dos elementos seja refletida no componente inteiro, para isto iremos adicionar classes à div.box.

var elem = {};
elem.auto = $("#auto");
elem.box = $(".box");

elem.auto.on("input", function (event) {
  elem.box.toggleClass("md-has-value", elem.auto.val());
});

elem.auto.on("focusin", function (event) {
  elem.box.addClass("md-focus");
});

elem.auto.on("focusout", function (event) {
  elem.box.removeClass("md-focus");
});

no script acima, sempre que o input#auto estiver com focus, a div.box vai possuir a classe md-focus, e quando o input#auto, a div.box vai possuir a classe md-has-value.

então agora no lugar de setar a cor com

.box_bt:hover {
   color: #1E90FF;
}

você vai setar com

.box.md-focus i ,
.box.md-focus label {
  color: #1E90FF;
  opacity: 1;
}

.box.md-focus {
  border-color: #1E90FF;
}

no exemplo acima estou aplicando a cor quando o input ganha focus, e não quanto o mouse passa sobre o mesmo, pois isto está mais proximo do comportamento do Android...

Em todo caso, você pode substinuit os eventos focusin e focusiout, pelos mouseenter e mouseleave...

no exemplo acima, tambem faço um toggle da classe ms-has-value, pois você pode querer aplicar um efeito no label caso o input tenha algum valor.

5
  • bom tentei fazer aqui, mas não eu certo. tem como vc conferir se fiz algo errado. Segue link: jsfiddle.net/bp3fsk3b/2 19/02/2016 às 11:51
  • @Hugo, realizei uns ajustes, eu acabei confundindo o nome dos eventos... JSFiddle 19/02/2016 às 12:29
  • ok e isso mesmo, porém a animação não esta funcionando mais, ela tem quer ser igual a 1º input, quando vc clica o texto sobe, e o texto não pode mudar a cor do texto, apenas da borda. Tem como resolver isso? 19/02/2016 às 13:16
  • @HugoSabrina, como já havia sugerido antes, inclui os eventos mouseenter e mouseleave, então passei a fazer o toggle de mais uma classe na div.box, no caso md-mouse... tanto o md-focus e md-mouse estão tornando a bordar azul... porem apenas o md-focus torna o label mais opaco. JSFiddle 19/02/2016 às 13:39
  • bom então não tem como fazer a animação com a borda azul? 19/02/2016 às 15:33
0

É esse o resultado que você quer?

Desculpem por reativar, me confundi com as datas e achei que fosse desse ano. Agora que vi Fev de 2016. :|

O que me mudei foi adicionar mais uma classe no toggle do jquery para cada div, e criar essas classes no css. Parece que deu certo.

$('.form_campos').on('focus blur', function (e) {

    $(this).parents('.form-group').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0));

}).trigger('blur');

$('.form_campos_box').on('focus blur', function (e) {

    $(this).parents('.box').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0))
 
}).trigger('blur');
body {
font-family: 'Verdana';
font-size: 12px;
}

.form-group {
  position: relative;
  display: flex;
  height: 45px;
  float: left;
  margin-right: 2px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;

}

.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 {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 20px;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  outline: none;
  background: transparent;
  border: none;
}



.form_campos_numeros {
  width: 123px;
}



/* BOX INPUT E BOTAO */

.box {
  width: 250px;
  display: flex;
  height: 44px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}


.box input {
  outline: 0;
  width: 230px;
  height: 20px;
  border: 0;
  background: transparent;
}

.box_bt {
  margin-top: 28px;
  cursor: pointer;
}

.box_bt:hover {
  color: #1E90FF;
}


.box.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos_box {
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  position: relative;
  display: block;
  outline: none;
}

.box.focus, .form-group.focus {
     border-color: #1E90FF;}

.box:hover, .form-group:hover {
     border-color: #1E90FF;}

/* FIM BOX INPUT E BOTAO *
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class='form-group'>
    <label class='control-label' for='numParcelas'>PARCELAS*</label>
    <input type='text' class='form_campos form_campos_numeros' id='numParcelas' name='numParcelas'>
</div>

<br><br><br><br><br><br>

<div class='box'>
    <label class='control-label' for='auto'>FORNECEDOR*</label>
    <input type='text' class='form_campos_box' id='auto' name='nome'>
    <div class="box_bt">
        <i class='demo-icon'>X</i>
    </div>
</div>

1
  • 1
    Não tem problema responder perguntas antigas, desde que sua resposta seja mais uma alternativa as já existentes :)
    – user28595
    7/02/2017 às 9:52
0

Fiz algumas alterações simples no teu Fiddle e funcionou perfeitamente:

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

$('.form_campos_box').on('focus blur', function(e) {
  $('.box').toggleClass('focused');
});
    body {
      font-family: Verdana;
      font-size: 12px;
    }
    
    .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 {
      opacity: 1;
      transform: scale(0.75);
    }
    
    .form_campos {
      height: 20px;
      color: #484848;
      z-index: 1;
      align-self: flex-end;
      font-size: 15px;
      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;
    }
    
    .form_campos_numeros {
      width: 123px;
    }
   
   
   
    /* BOX INPUT E BOTAO */
    
    .box {
      width: 250px;
      display: flex;
      height: 44px;
      border-color: #484848;
      border-style: solid;
      border-bottom-width: 1px;
      border-top-width: 0;
      border-right-width: 0;
      border-left-width: 0;
    }
    
    .box input {
      outline: 0;
      width: 230px;
      height: 20px;
      border: 0;
      background: transparent;
    }
    
    .box_bt {
      margin-top: 28px;
      cursor: pointer;
    }
    
    .box_bt:hover {
      color: #1E90FF;
    }
    
    .box:hover, .box.focused {
      border-color: #1E90FF;
    }
    
    .box.focused .control-label {
      opacity: 1;
      transform: scale(0.75);
    }
    
    .form_campos_box {
      color: #484848;
      z-index: 1;
      align-self: flex-end;
      font-size: 15px;
      padding: 5px;
      position: relative;
      display: block;
      outline: none;
    }
    /* FIM BOX INPUT E BOTAO */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class='form-group'>
  <label class='control-label' for='numParcelas'>PARCELAS*</label>
  <input type='text' class='form_campos form_campos_numeros' id='numParcelas' name='numParcelas'>
</div>

<br><br><br><br><br><br>

<div class='box'>
  <label class='control-label' for='auto'>FORNECEDOR*</label>
  <input type='text' class='form_campos_box' id='auto' name='nome'>
  <div class="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>

3
  • Esse link pode ser uma boa sugestão, mas sua resposta não terá validade se um dia o link deixar de funcionar. Além disso, é importante para a comunidade ter conteúdo aqui no site mesmo. Seria melhor incluir mais detalhes na sua resposta. Um resumo do conteúdo do link já ajudaria bastante! Saiba mais sobre o assunto neste item do nosso FAQ da Comunidade: Queremos respostas que contenham somente links?
    – Sorack
    7/02/2017 às 11:40
  • Muito interessante, ainda sou bem novo por aqui e a vontade de ajudar as vezes esbarra nesses detalhes, vou editar minha resposta! 7/02/2017 às 11:46
  • Sem problema, a intenção é sempre melhorar
    – Sorack
    7/02/2017 às 11:48

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 .