Placeholder Text

rss

Posted by schuess - Oct 27 ’15 at 12:28

How would you suggest we incorporate placeholder text in our form fields? Should we find and use a jQuery Plugin, do you have plans to add the HTML placeholder attribute to the form designer editor?

 

thanks

matt

 

  • rostislav
    rostislav
    Moderator
    Member for: 7 years 10 days
    #1 by rostislav Oct 28 ’15 at 07:22

    The method below will not work for versions of IE below 10.

    If you're looking to set an input field's placeholder, try:

    fd.field('InternalName').control()._el().find('input').attr('placeholder', 'my placeholder');
    

    If it's going to be a textarea, then do:

    fd.field('InternalName').control()._el().find('textarea').attr('placeholder', 'my placeholder');
    

    (Add the code to the JavaScript editor for your form, replacing InternalName with the appropriate internal name).

    If you need this thing to work in IE versions 9 and lower, your best bet is to use the jQuery placeholder plugin: https://github.com/mathiasbynens/jquery-placeholder. You'll have to dynamically add a <script> element with src set to the js file and then follow the documentation to set the placeholder. If you need further assistence, let us know.

  • schuess
    schuess
    Member
    Member for: 8 years 3 months 23 days
    #2 by schuess Oct 28 ’15 at 08:17

    Great Response, Thank you.

     

    PS> This seems like a easy feature addition for the next update to the product.

  • schuess
    schuess
    Member
    Member for: 8 years 3 months 23 days
    #3 by schuess Oct 10 ’16 at 09:50

    I can't figure out how to style the placeholder text. I was hoping to just lighten up the color so that it is more easily visable as only placeholder text.

    Thanks

  • YuriyMedvedev
    Moderator
    Member for: 5 years 7 months 20 days
    #4 by YuriyMedvedev Oct 11 ’16 at 08:51

    [#3]: Hi! First, add a CSS class, say 'input-ph' to a field.

     

    Then insert the following code into CSS-editor (replace colors and the class name with the appropriate values):

     .input-ph input::-webkit-input-placeholder {color:#c0392b;}
    
     .input-ph input::-moz-placeholder          {color:#c0392b;}/ Firefox 19+ /
    
     .input-ph input:-moz-placeholder           {color:#c0392b;}/ Firefox 18- /
    
     .input-ph input:-ms-input-placeholder      {color:#c0392b;}
Displaying 1 to 4 of 4 messages