He creado una entrada personalizada en la que muestra una animación cuando se enfoca. Funciona bien cuando los campos de entrada están en blanco porque cuando el valor de la entrada es nulo / en blanco, la entrada se establece en los valores predeterminados (es decir, Estado-1) (Ver jsFiddle) y cuando tiene algún valor, permanece en su nuevo estado después de la animación (Estado- 2).

Quiero que todas las entradas se deben verificar al cargar el formulario, debe verificar todos los campos de entrada, si aquellos que tienen algún valor, la entrada debe estar en State-2, de lo contrario en state-1

NOTA: Si tiene una manera mejor de lograr esto que la mía, por favor, compártala conmigo.

Código de muestra HTML:

<div class="container">
  <div class="form-wrapper">
    <label>Name</label>
    <input type="text" class="form-input">
  </div>
</div>

Js:


$('.form-wrapper .form-input').focus(function () {
    $(this).parent().find('label').addClass('hasValue');
    $(this).addClass('hasValueInput');

});

$('.form-wrapper .form-input').blur(function () {
    if (!$(this).val()) {
        $(this).parent().find('label').removeClass('hasValue');
    }
    $(this).removeClass('hasValueInput');
});

Css:

.form-wrapper label {
  font-size: 110%;
  position: absolute !important;
  top: 10px;
  box-sizing: border-box;
  color: #80868b;
  left: 20px;
  z-index: 10;
  width: auto;
  padding: 1px;
  transition: font-size 0.2s, transform 0.2s;
}

.form-input{
  padding:5px;
}


.hasValue {
  color: #000 !important ;
  font-size: 90% !important;
  font-weight: 700;
  background-color: white;
  z-index: 2;
  transform: translate(0px, -10px);
}

.hasValueInput {
  box-shadow: none !important;
  border: 2px solid #17a2b8 !important ;
}

https://jsfiddle.net/knb8qp1o/2/

0
Okasha Momin 23 ago. 2020 a las 23:55

1 respuesta

La mejor respuesta

Puede encadenar a su controlador de eventos el evento .trigger ():

$('.form-wrapper .form-input').focus(function () {
...................
}).trigger('focus');
$('.form-wrapper .form-input').focus(function () {
    $(this).parent().find('label').addClass('hasValue');
    $(this).addClass('hasValueInput');

}).trigger('focus');

$('.form-wrapper .form-input').blur(function () {
    if (!$(this).val()) {
        $(this).parent().find('label').removeClass('hasValue');
    }
    $(this).removeClass('hasValueInput');
});
.form-wrapper label {
  font-size: 110%;
  position: absolute !important;
  top: 10px;
  box-sizing: border-box;
  color: #80868b;
  left: 20px;
  z-index: 10;
  width: auto;
  padding: 1px;
  transition: font-size 0.2s, transform 0.2s;
}

.form-input{
  padding:5px;
}


.hasValue {
  color: #000 !important ;
  font-size: 90% !important;
  font-weight: 700;
  background-color: white;
  z-index: 2;
  transform: translate(0px, -10px);
}

.hasValueInput {
  box-shadow: none !important;
  border: 2px solid #17a2b8 !important ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-wrapper">
    <label>Name</label>
    <input type="text" class="form-input" value="startvalue">
  </div>
</div>

Su violín actualizado aquí.

1
gaetanoM 23 ago. 2020 a las 21:03