The most lightweight solution to have placeholders in your forms!
In forms, the placeholder property for data entry fields is not so easy to customize and not all browsers behave the same in order to properly show them. This extension unifies the criteria for all browsers and it is highly customizable to fit your design needs.
Supports multi-instances; this means that you can have grouped/individual fields with their own colors/settings.
It is cross-browser compatible and even supports old ones.
* Just a brief about some of the changes that were made lately...
* New in version 184.108.40.206:
- Workaround for iOS event bug in select object. - Workaround for Chrome event bug in select object. - Improved RTL alignment in select object (please read the "known issues" section).
* New in version 220.127.116.11:
- Improved support for iOS-based devices. - Improved auto-update process. - Improved "pixel-perfect" process.
* New in version 18.104.22.168:
- Added smooth colors transitions effect.
* New in version 22.214.171.124:
- Added support for RWD. - Fixed bug in bottom alignment.
* New in version 126.96.36.199:
- Optimized core. - RTL support (please read the "known issues" section).
* New in version 188.8.131.52:
- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames. - Background bug fix in some Gecko based browsers. - Optimized core.
* New in version 184.108.40.206:
- Fixed a "double-click" issue in Android-based tablets to activate the keyboard. - Fixed a "double-right-click" issue to activate the context-menu in Safari. - Improved mouse-emulation colors behavior in touch screens. - Pixel-perfect option that fixes a size issue in some browsers. - Entrybox and textarea objects will have the same size as in the workspace (true wysiwyg), even in older browsers and quirks mode. - Placeholders can have their own alignments within the entry area. - Workaround for the textarea background image bug in IE8 and earlier (the image moves with the text instead of remain in its original location).
* New in version 220.127.116.11:
- Improved behavior on page refresh. - Improved security on history-back (optional). - Borders, background and foreground colors for onhover/onfocus statuses. - Can detect background/programatically value changes (for advanced users!). - Placeholder texts can be resized (reduced) proportionally. - The extension can be placed wherever you want, even outside the form (and even if it exists or not).
* NEW in version 18.104.22.168:
-Added on-focus behavior: dotted box, border color and background color. -Added clear/reset form support. -Improved code for better performance.
How to use?
1. Design your form as you usually do. 2. Setup the form validation rules (if applies, it is up to you). 3. Drag and drop the extension into the workspace. 4. Open its properties dialog and setup the fields that will have a placeholder (the empty-field message). 5. Setup the color and the font type of the placeholder (or leave them as by default). 6. Setup the field borders, background and content colors for when it gets the focus (or leave them as by default). 7. You can do the same as in #6 for when the mouse is over the entry field. 8. Preview or publish (remember: to send messages -depending on your settings- you may need php!).
(Supports multi-instances; you can have grouped/individual fields with their own colors/settings.)
RTL issues in combobox (not related to the extension):
- IE: must specify the horizontal position (any other than 'auto') or specify the text-align property in the object to let the extension align the placeholder correctly. - Safari: the options list is always left aligned. - Opera: the down arrow fills the control and overlaps the placeholder.
Other alignment issues in combobox (not related to the extension):
- The down arrow will overlap the placeholder if the object alignment is left and the placeholder is aligned to the right and vice-versa; the solution is adding an horizontal offset; if this will interfere with other entry objects alignments in the extension, a new instance can be created for only the affected comboboxes. - IE 8 and earlier, as well as in some older FireFox versions, there is a vertical/horizontal misplacement whith padding.