magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Form Placeholders


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.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.3.0.3:

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

- Improved support for iOS-based devices.
- Improved auto-update process.
- Improved "pixel-perfect" process.

* New in version 1.3.0.1:

- Added smooth colors transitions effect.

* New in version 1.3.0.0:

- Added support for RWD.
- Fixed bug in bottom alignment.

* New in version 1.2.0.3:

- Optimized core.
- RTL support (please read the "known issues" section).

* New in version 1.2.0.2:

- Workaround for Firefox issue (setting-up placeholders) in hidden inline frames.
- Background bug fix in some Gecko based browsers.
- Optimized core.

* New in version 1.2.0.0:

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

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

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

Enjoy!


Known issues:

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.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with