input effect with jQuery

0

Well, I've created a very precise system and input with that of android, I've used CSS and jQuery.

But I wanted to put a precise effect on the google lite material. Here's the example link: link

I do not want to use the lite material because my goal is to try to make an input based on the lite material.

Does anyone know how to do this?

Follow the code I've already put up.

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

  $(".autofocus").trigger('focus');

  // Converte minusculas em maiusculas
  $('input').not('[name="link"]').on('input', function() {

    // Armazena posição corrente do cursor
    var start = this.selectionStart,
      end = this.selectionEnd;
    this.value = this.value.toUpperCase();

    // Restaura posição armazenada anteriormente.
    this.setSelectionRange(start, end);
  });
});
.form-group {
    margin-top: 20px;
    position: relative;
    display: flex;
    height: 45px;
    float: left;
    width: 400px;
}
.form-group::after {
width: 100%; 
height: 2px; 
background:#0091FF; 
position: absolute; 
left:0; 
bottom:0; 
content: ''; 
transform: scaleX(0); 
transition: ease-in-out 240ms all;
}
.form-group.focused::after {
transform:scaleX(1);
}
.control-label {
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    transform: translate3d(5px, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
}
.form-group.focused .control-label, .form-group-select.focused .control-label {
    opacity: 1;
    transform: scale(0.75);
}
.form_campos {
    height: 31px;
    width: 100%;
    color: #484848;
    align-self: flex-end;
    padding: 5px;
    outline: none;
    border: 0 solid #484848;
    border-bottom-width: 1px;
    background: transparent;
    border-radius: 0;
}
.form_campos:hover, .form_campos:focus {
    border-color: #0091FF;
}
.form_disabled, .form_disabled:hover, .form_disabled:focus {
    border-color: #D7D7D7;
}
<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='nome'>NOME</label>
  <input type='text' class='form_campos' id='nome' name='nome'>
</div>
<br><Br><br><Br>
<div class='form-group'>
  <label class='control-label' for='idade'>idade</label>
  <input type='text' class='form_campos' id='idade' name='nome'>
</div>
    
asked by anonymous 21.04.2017 / 15:35

1 answer

1

You can add ::after to your css with the bottom-edge format, and use the transform property to resize it when focus is assigned

Follow the example below: html

<div class='form-group'>
    <label class='control-label' for='nome'>NOME</label>
    <input type='text' class='form_campos' id='nome' name='nome'>
    <div class="under"></div>
</div>
<br><Br><br><Br>
<div class='form-group'>
    <label class='control-label' for='idade'>idade</label>
    <input type='text' class='form_campos' id='idade' name='nome'>
    <div class="under"></div>
</div>

CSS

.form-group .under {
    width: 100%; 
    height: 2px; 
    background:#0091FF; 
    position: absolute; 
    left:0; 
    bottom:0; 
    content: ''; 
    transform: scaleX(0); 
    transition: ease-in-out 240ms all;
}
.form-group.focused input:focus + .under {
    transform:scaleX(1);
}
    
05.05.2017 / 20:21