├── .gitattributes ├── .gitignore ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE.txt ├── README.md ├── bower.json ├── index.html ├── jquery.placeholder.js ├── jquery.placeholder.min.js ├── jquery.placeholder.min.js.map ├── package.json ├── simulated.html └── tests ├── index.html └── tests.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * eol=lf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bower_components/ 3 | node_modules/ -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | #Found a bug? 2 | 3 | ###Please include the following when opening an issue: 4 | 5 | 1. jquery-placeholder version 6 | 2. jquery version 7 | 3. Browser vendor and versions where you are seeing the issue 8 | 4. Example code to reproduce the issue (using jsfiddle is best) 9 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | // Get devDependencies 6 | require('load-grunt-tasks')(grunt, {scope: 'devDependencies'}); 7 | 8 | // Displays the execution time of grunt tasks 9 | require('time-grunt')(grunt); 10 | 11 | // Config 12 | grunt.initConfig({ 13 | pkg: grunt.file.readJSON('package.json'), 14 | 15 | // uglify 16 | uglify: { 17 | options: { 18 | sourceMap: true, 19 | compress: { 20 | drop_console: true, 21 | drop_debugger: true 22 | }, 23 | banner: '/* <%= pkg.title %> - v<%= pkg.version %>\n' + 24 | ' * Copyright (c)<%= grunt.template.today("yyyy") %> Mathias Bynens\n' + 25 | ' * <%= grunt.template.today("yyyy-mm-dd") %>\n' + 26 | ' */' 27 | }, 28 | minify : { 29 | files: { 30 | 'jquery.placeholder.min.js': ['jquery.placeholder.js'] 31 | } 32 | } 33 | } 34 | 35 | }); 36 | 37 | /** 38 | * Register own tasks by putting together existing ones 39 | */ 40 | 41 | // Default task 42 | grunt.registerTask('default', 43 | ['uglify'] 44 | ); 45 | 46 | }; 47 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright Mathias Bynens 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML5 Placeholder jQuery Plugin 2 | 3 | ## Demo & Examples 4 | 5 | 6 | 7 | ## Example Usage 8 | 9 | ### HTML 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ``` 20 | 21 | ### jQuery 22 | 23 | Use the plugin as follows: 24 | 25 | ```js 26 | $('input, textarea').placeholder(); 27 | ``` 28 | 29 | By default, `.placeholder` css class will be added. You can override default by passing the `customClass` option: 30 | ```js 31 | $('input, textarea').placeholder({ customClass: 'my-placeholder' }); 32 | ``` 33 | 34 | You’ll still be able to use `jQuery.val()` to get and set the input values. If the element is currently showing a placeholder, `.val()` will return an empty string instead of the placeholder text, just like it does in browsers with a native `@placeholder` implementation. Calling `.val('')` to set an element’s value to the empty string will result in the placeholder text (re)appearing. 35 | 36 | ### CSS 37 | 38 | The plugin automatically adds `class="placeholder"` to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently: 39 | 40 | ```css 41 | input, textarea { color: #000; } 42 | .placeholder { color: #aaa; } 43 | ``` 44 | 45 | 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](https://stackoverflow.com/a/2610741/96656). 46 | 47 | ## Installation 48 | 49 | You can install jquery-placeholder by using [Bower](http://bower.io/). 50 | 51 | ```bash 52 | bower install jquery-placeholder 53 | ``` 54 | 55 | Or you can install it through [npm](https://www.npmjs.com/): 56 | 57 | ``` 58 | npm install --save jquery-placeholder 59 | ``` 60 | 61 | Contributors should install the »dev dependencies« after forking and cloning via [npm](https://www.npmjs.com/). 62 | 63 | ```bash 64 | npm install 65 | ``` 66 | 67 | ## Notes 68 | 69 | * Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see [v1.8.7](https://github.com/mathiasbynens/jquery-placeholder/tree/v1.8.7). 70 | * Works in all A-grade browsers, including IE6. 71 | * Automatically checks if the browser natively supports the HTML5 `placeholder` attribute for `input` and `textarea` elements. If this is the case, the plugin won’t do anything. If `@placeholder` is only supported for `input` elements, the plugin will leave those alone and apply to `textarea`s exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.) 72 | * Caches the results of its two feature tests in `jQuery.fn.placeholder.input` and `jQuery.fn.placeholder.textarea`. For example, if `@placeholder` is natively supported for `input` elements, `jQuery.fn.placeholder.input` will be `true`. After loading the plugin, you can re-use these properties in your own code. 73 | * Using `` will break the plugin functionality 74 | * Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra `input` element to fake `@placeholder` for password inputs. This means you can safely do stuff like: 75 | 76 | ```html 77 | 78 | 79 | ``` 80 | 81 | And the `