How to move placeholder to top on focus AND while typing

[CoopperBackpack]

Hello,

I have found this solution https://stackoverflow.com/questions/35942247/how-to-move-placeholder-to-top-on-focus-and-while-typing

How can I implement it on Caspio?

 

Thanks

 

[Hastur]

Hello @CoopperBackpack

You can insert this snippet of code into your submission form Header:

<style>
.cbFormFieldCell  {
 position: relative;
 width: 50%;
}

.cbFormFieldCell  .floating-label {
 position: absolute;
 color: gray;
 font-size: 13px;
 pointer-events: none;
 top: 11px;
 left: 20px;
 transition: 0.2s ease all;
}

.cbFormFieldCell  input:focus ~ .floating-label,
.cbFormFieldCell input:not(:focus):valid ~ .floating-label {
 top: 0px;
 left: 10px;
 font-size: 10px;
 opacity: 1;
 background-color: white;
 padding: 0 3px;
}
</style>

<script>
document.addEventListener("DataPageReady", placeholderHandler);

function placeholderHandler() {
 const labels = document.querySelectorAll('.cbFormLabelCell');
 const inputs = document.querySelectorAll('.cbFormFieldCell');

 for(let i = 0; i < labels.length; i++) {
  if (inputs[i].children[0].type === 'text') {  
   labels[i].children[0].classList.add("floating-label");
   inputs[i].children[0].setAttribute("required", true);
   inputs[i].appendChild(labels[i].children[0]);
   labels[i].remove();
  }
 }
 console.log(labels);
}
</script>

You also can customize the placeholder adjusting the properties in the style tag of the code.

[CoopperBackpack]

Thank you, @Hastur

This solution works.