Gostaria de saber se é possível criar efeito floating label no wix corvid. Tenho aplicação funcional fora do corvid. É possível adaptar o código para funcionar no wix corvid ou existe alguma maneira de forma nativa ou diferente? Obrigado.
Segue o código em js:
const FloatLabel = (() => { // add active class const handleFocus = (e) => { const target = e.target; target.parentNode.classList.add('active'); target.setAttribute('placeholder', target.getAttribute('data-placeholder')); }; // remove active class const handleBlur = (e) => { const target = e.target; if(!target.value) { target.parentNode.classList.remove('active'); } target.removeAttribute('placeholder'); }; // register events const bindEvents = (element) => { const floatField = element.querySelector('input'); floatField.addEventListener('focus', handleFocus); floatField.addEventListener('blur', handleBlur); }; // get DOM elements const init = () => { const floatContainers = document.querySelectorAll('.float-container'); floatContainers.forEach((element) => { if (element.querySelector('input').value) { element.classList.add('active'); } bindEvents(element); }); }; return { init: init }; })(); FloatLabel.init();
Oi @Rodrigo Morello
Infelizmente ainda não é possível manipular o label da caixa de texto via api, mesmo utilizando o seu código, não vai funcionar.
Espero ter ajudado!