How to add fading text in a form field (to show a suggestion)

Great ! :)

Thank you very much Ifra Saqlain it works perfectly!!

Best regards,

Raphaël

@Raphaël Péguet, try this updated code and remove previous:

    var textOpacity = document.getElementById("request_subject");
    var fieldValue = document.getElementById("request_subject").value = 'CUSTOM TEXT';
    textOpacity.style.color = "red";
  
window.addEventListener('click', function(e) {   
  if (document.getElementById('request_subject').contains(e.target)){
    textOpacity.style.opacity = "0.5";
  } else{
    textOpacity.style.opacity = "1"
  }
});

Team

Ifra Saqlain Thank you very much Ifra! 

It works but because of "onclick" function if I write over the "native" text 

Then go to another field and come back to the previous field to rewrite "the on click function" will erase what I wrote.

I did a video about it: https://www.loom.com/share/5e5d95df2e2a499787a756d44298126a

So maybe we should ask a "if" to the "onclick" to say if val = native value then fade if not don't do anything.

Best regards, 

Raphaël

Hey Raphaël Péguet,

Can be done something like this:

$('#request_subject').val('Product Registration').css("color","red");
 $('#request_subject').click(function(){
    $(this).val('Product Registration').css("opacity"," .5");
 });


Output: 
Default



After clicking:

Team