https://github.com/xwartz/placeholder

HTML5 features support in older browser
https://github.com/xwartz/placeholder

Last synced: about 1 month ago
JSON representation

HTML5 features support in older browser

• Host: GitHub
• URL: https://github.com/xwartz/placeholder
• Owner: xwartz
• Created: 2014-08-05T02:02:27.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-05T13:28:17.000Z (over 10 years ago)
• Last Synced: 2024-10-14T08:10:50.739Z (2 months ago)
• Language: JavaScript
• Size: 227 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Placeholder

===========

## HTML5 Placeholder Feature Like `Chrome` support in older browser

### Example Usage

Use the plugin as follows:

#### JS

```js

$('input').placeholder();

```

#### CSS

The plugin automatically adds `class="placeholder"` to the placeholder text and adds `class="placeholder-wrapper" to the element parent who created by plugin`. 

You should set css style make it work, like:

```css

.placeholder-wrapper {

   position: relative;

   display: inline-block;

}

.placeholder {

   position: absolute;

   left: 0;

   top: 0;

   padding: 7px, 4px;

   color: #aaa;

   cursor: text;

}

```

I’d suggest sticking to the `#aaa` color for placeholder text, as it’s the default in most browsers that support `@placeholder`. 

If you really want to, though, you can [style the placeholder text in some of the browsers that natively support it](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741).

### Notes

if you use `` element, you should set `id`, like

 ```html

  

 ```

The `` who the plugin created will always point to the `` element, and the `` element will focus when you click.

### License

This plugin is available under [the MIT license].