Placeholder Text

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
User avatar
schuess
Posts: 82
Joined: Wed Jan 22, 2014

27 Oct 2015

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

User avatar
rostislav
Moderator
Posts: 364
Joined: Mon Oct 19, 2015

28 Oct 2015

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

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

Code: Select all

fd.field('InternalName').control()._el().find('input').attr('placeholder', 'my placeholder');
If it's going to be a textarea, then do:

Code: Select all

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.

User avatar
schuess
Posts: 82
Joined: Wed Jan 22, 2014

28 Oct 2015

Great Response, Thank you.


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

User avatar
schuess
Posts: 82
Joined: Wed Jan 22, 2014

10 Oct 2016

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
Posts: 33
Joined: Wed Sep 21, 2016

11 Oct 2016

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):

Code: Select all

 .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;}

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests