Display form label when text is within field

[SanfordWhiteman · Accepted solution]

Y'left out one important case with Marketo forms.

Also, you need only listen for the input event to cover both key events and clipboard events. See

     MktoForms2 :: Floating Labels (tmarcacci)

which is tested back to IE 10.

Also, note to Tim: the placeholders aren't great in IE 10-11 because they're the same white color as user-entered text:

[Tim_Marcacci]

Thanks so much Sanford Whiteman​ and Jay Jiang​. I'll definitely fix the white placeholders in IE, but this functionality is perfect!  I'll also look into the the DoS vulnerability article as well.

Cheers.

[Tim_Marcacci]

Hi Sanford Whiteman Is there a way to isolate this floating label code to a specific form? This form will be living in the footer, so I don't want it to affect any other forms that may be on a page.

[SanfordWhiteman]

Is there a way to isolate this floating label code to a specific form?

Sure, just compare to the form ID.

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
      formId = form.getId(),
      enhanceableFormIds = [2200],
      placeholderableTypes = ["text", "search", "tel", "url", "email", "password", "number"];
  if (enhanceableFormIds.indexOf(formId) == -1) return;
  /* ... continue with the rest of your custom behaviors... */

[Kyle_Hand]

Hey this is a great solution. Thanks for posting this up. Is there a way to include textareas for larger comment areas. Your code seems to include everything but textareas? Thanks in advance.

[SanfordWhiteman]

Hey this is a great solution. Thanks for posting this up. Is there a way to include textareas for larger comment areas. Your code seems to include everything but textareas? Thanks in advance.

Grab the updated JS pane from v1.0.1: MktoForms2 :: Floating Labels (tmarcacci) v1.0.1

[CaitlinKelley]

Hey Sanford,

This is a wonderful solution, thank you for sharing! I was wondering if you have any recommendations for how to create similar functionality on dropdown select fields? 

[SanfordWhiteman]

The code could be adapted to detect whether the "no-value Option" (that's usually the top Option in a Marketo Select field) is chosen.

However, IIRC, Selects don't fire the Input event. So there you'd have to detect the Change event instead. It would take a little time to test and work out the kinks, definitely 100% possible.

[Crystal_Pacheco]

@SanfordWhiteman This script is really great except that it's missing the ability to show/hide the label if a change has been made to the select drop down menu.
The textarea input field also required a small fix to get working. Here is what I have so far that works for textarea but not select:

MktoForms2.whenReady(function(form){
      var formEl = form.getFormElem()[0],
          placeholderableTypes = {
             "INPUT" : ["text", "search", "tel", "url", "email", "password", "number"],
             "TEXTAREA" : ["textarea"],
             "SELECT" : ["select"]
          };
      
      function managePlaceholders(knownTarget){
         var currentValues = form.getValues(),
             fieldNames = knownTarget ? [knownTarget.target.name] : Object.keys(currentValues);
         
         fieldNames
            .map(function(fieldName){
              var fieldEl = formEl.querySelector("[id='" + fieldName + "']" ),
                  labelEl = fieldEl && formEl.querySelector("label[for='" + fieldEl.id + "']" );
            
              return {
                 fieldEl : fieldEl,
                 labelEl : labelEl,
                 isValued : Boolean(currentValues[fieldName])
              }
            })
            .filter(function(labelDesc){
              return labelDesc.labelEl && 
                     Array.isArray(placeholderableTypes[labelDesc.fieldEl.nodeName]) &&
                     placeholderableTypes[labelDesc.fieldEl.nodeName]
                       .some(function(type){
                         return labelDesc.fieldEl.type == type;
                       });                     
            })
            .forEach(function(labelDesc){
              labelDesc.labelEl.setAttribute( "data-for-placeholder-hidden", [labelDesc.isValued, knownTarget ? "interactive" : "prefilled"].join("-") );
            });
      }
      
      formEl.addEventListener("change", managePlaceholders);
      managePlaceholders();
   });

[SanfordWhiteman]

Well, your change broke the original functionality. input isn't the same as change, and the choice to use input was 100% deliberate.

As I mentioned above, the <select> element needs to use change (but not input), while <input> subtypes need to use input (but not change).

The code needs to be refactored to ensure that each fired event only pertains to its relevant subset of the element types. It's not changing just one line of code.

(P.S. The type of a <select> isn't select.)