Skip to content

Latest commit

 

History

History
34 lines (23 loc) · 1.12 KB

README.md

File metadata and controls

34 lines (23 loc) · 1.12 KB
Raw

watermark

A very simple and lightweight jQuery plugin to add HTML5 placeholder support, only when browser doesn't support it natively.

why

I've tried a few watermark plugins in my projects.
They are a few ways this is implemented, but all of them have more or less some issues.

  • watermark is returned from val() function instead of empty string when it only contains watermark
  • watermark is used as value during form submition instead of empty string
  • watermark is not placed correctly when field is "display:none"
  • additional fields get submitted to server which may cause validation/binding errors on server side

Example

HTML

<input id="sample"  type="text" placeholder="sample">
<input id="example" type="text" placeholder="example">

Javascript

$.placeholder(); // apply watermark to all input fields with placeholder attribute
or
$("#sample").placeholder(); // only apply to some fields by using selector

CSS

Every input field with watermark applied will have css class "placeholder" which can be used to define the style

.placeholder {
  color: #CCC;
}