3

Tengo un formulario, en el cual los input text tienen unas clases para que el placeholder una vez se tiene seleccionado el input text pase a ser un label, el problema es que una vez deja de estar seleccionado este pasa de nuevo a su lugar, sin importar si tiene texto dentro lo cual queda muy mal. Eso se hace con la clase "nk-toggled" que se aplica cuando está seleccionado el input text, en teoría está en el código pero no sé porque no funciona.

Así se ve normal Así se ve normal

Así cuando tiene el focus Así cuando tiene el focus

Así cuando pierde el focus y sigue con texto adentro Así cuando pierde el focus y sigue con texto adentro

El código javascript para eso es el siguiente:

$(".nk-int-st")[0] && ($("body").on("focus", ".nk-int-st .form-control", function() {
  $(this).closest(".nk-int-st").addClass("nk-toggled")
}), $("body").on("blur", ".form-control", function() {
  var p = $(this).closest(".form-group, .input-group"),
    i = p.find(".form-control").val();
  p.hasClass("fg-float") ? 0 == i.length && $(this).closest(".nk-int-st").removeClass("nk-toggled") : $(this).closest(".nk-int-st").removeClass("nk-toggled")
})), $(".fg-float")[0] && $(".fg-float .form-control").each(function() {
  var i = $(this).val();
  0 == !i.length && $(this).closest(".nk-int-st").addClass("nk-toggled")
});

4
  • 1
    Para poder encontrar el fallo haría falta un Ejemplo mínimo verificable, Mas allá del código JS, no tenemos el código del DOM en esos momentos. A simple vista parece que el problema está en el IF de una linea, ¿p tiene la clase fg-float cuando se ejecuta el evento?
    – x3k
    Commented el 17 jun. 2019 a las 10:00
  • @Parra pues aquí hay una demo de su autor.
    – eriandev
    Commented el 17 jun. 2019 a las 21:10
  • @Ragnaval agrega todas las partes relvantes a tu pregunta, las ligas pueden caducar, y tu ejemplo puede tener errores tipográficos que no podríamos reproducir a partir de código de una pagina que pudo haber cambiado el día de ayer. Ademas el sitio te provee de snippets que es una forma de tener código ejecutable en la misma pregunta, cosa que ayuda con la despuración y eliminación de errores comunes, además de que permite ver el mensaje de error exacto si es que lo hay. Commented el 18 jun. 2019 a las 18:10
  • Adicionalmente te recomiendo probar con el selector input:placeholder-shown Commented el 18 jun. 2019 a las 18:14

1 respuesta 1

1

se podría obtener el valor de ese input y validar si tiene o no algún texto para aplicarle la clase que dices que activa el label (nk-toggled), es decir:

<input type="text" class="js-dni">

$(document).ready(function(){
  let inputElement = $('.js-dni');

  if (inputElement.val() === '')
    inputElement.addClass('nk-toggled');  
  else
    inputElement.removeClass('nk-toggled');
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.