jquery-placeholder

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

  • 所有者: mathiasbynens/jquery-placeholder
  • 平台:
  • 许可证: MIT License
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

HTML5 Placeholder jQuery Plugin

Demo & Examples

https://mathiasbynens.github.io/jquery-placeholder/

Example Usage

HTML

<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. address@example.ext">
<input type="url" name="url" placeholder="e.g. https://mathiasbynens.be/">
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
<input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>

jQuery

Use the plugin as follows:

$('input, textarea').placeholder();

By default, .placeholder css class will be added. You can override default by passing the customClass option:

$('input, textarea').placeholder({ customClass: 'my-placeholder' });

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.

CSS

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:

input, textarea { color: #000; }
.placeholder { color: #aaa; }

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.

Installation

You can install jquery-placeholder by using Bower.

bower install jquery-placeholder

Or you can install it through npm:

npm install --save jquery-placeholder

Contributors should install the »dev dependencies« after forking and cloning via npm.

npm install

Notes

  • Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see v1.8.7.

  • Works in all A-grade browsers, including IE6.

  • 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 textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)

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

  • Using <input type="reset" /> will break the plugin functionality

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

    <label for="bar">Example label</label>
    <input type="password" placeholder="foo" id="bar">
    

    And the <label> will always point to the <input> element you’d expect. Also, all CSS styles based on the ID will just work™.

License

This plugin is available under the MIT license.

Thanks to…

Mathias

主要指标

概览
名称与所有者mathiasbynens/jquery-placeholder
主编程语言JavaScript
编程语言JavaScript (语言数: 2)
平台
许可证MIT License
所有者活动
创建于2010-01-19 21:26:21
推送于2020-10-20 16:59:48
最后一次提交2020-10-20 09:59:47
发布数23
最新版本名称v2.3.1 (发布于 )
第一版名称v1.8.2 (发布于 )
用户参与
星数4k
关注者数132
派生数1.3k
提交数166
已启用问题?
问题数218
打开的问题数27
拉请求数32
打开的拉请求数1
关闭的拉请求数56
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?