A JavaScript polyfill for the HTML5 placeholder attribute

Overview

#Placeholders.js - An HTML5 placeholder attribute polyfill

Placeholders.js is a polyfill (or shim, or whatever you like to call it) for the HTML5 placeholder attribute, as defined in the HTML5 specification. Placeholder attributes are valid on input elements of various types and textarea elements.

Placeholders.js is licensed under the MIT License. See the unminified file for the full license text.

Get it!

The polyfill is available through Bower:

bower install placeholders

Alternatively, you can download the polyfill and get a whole load of information and instructions at our website. If you're using Ruby on Rails, you can also try out our gem.

Supported Browsers

Placeholders.js aims to support the widest range of browsers possible. The idea is that you will be able to use the native placeholder attribute along with Placeholders.js and your users on any platform will get the same experience. This table will be updated as and when further browsers are tested. Mobile browser testing is a big one that's high on the list. Currently tested and working in the following browsers on (where applicable) both Windows 7 and CentOS 6:

  • Internet Explorer 6 - 9 (with Placeholders.js)
  • Firefox 1 - 3 (with Placeholders.js), 4+ (native)
  • Opera 7 - 10 (with Placeholders.js), 11+ (native)
  • Safari 3.2 (with Placeholders.js), 4+ (native)
  • Chrome 4+ (native)
  • Flock 1.0+ (with Placeholders.js)
  • Konqueror 4.3 (with Placeholders.js)
  • SeaMonkey 1+ (with Placeholders.js)
  • Maxthon 1+ (with Placeholders.js)
  • SlimBrowser 5 (with Placeholders.js)
  • K-Meleon 0.7+ (with Placeholders.js)

Do you use some obscure browser that doesn't have native placeholder attribute support? If so, please let me know so I can make sure Placeholders.js works with it.

Comments
  • Problem with input field, maxlength attribute and long placeholder text

    Problem with input field, maxlength attribute and long placeholder text

    The current code causes a problem when the input field has a maxlength attribute and the placeholder text is longer than that length. The current pull request solves this by clearing (and storing) the maxlength value when the placeholder is shown and restoring it when the placeholder should be hidden.

    While achieving this, I also removed code duplication in makeKeyupHandler.

    opened by paracycle 13
  • Bower dependencies

    Bower dependencies

    I'm using bower to download the lib and used it. But I'm not able to find the proper .js to include in my webpage. Could you please but the assets in the github repository?

    opened by oracleruiz 7
  • add propertychange handlder ,and structure change

    add propertychange handlder ,and structure change

    here is some changes

    1. I added a propertychange listener to handle the placeholder attribute change ,so when the attribute change , we can change the input value imidately
    2. the updateplaceholder function and the createplaceholder function are almost same, and updatePlaceholder doesn't process the form submit for new added input element, so I merge the two function to one
    3. sometimes, I don't wan't use the refresh to process the new input element which added after page loaded,I want a function just attach the new input . so I add "attach" method

    in addition, I don't think refresh method has meaning any more, except in the browser don't support properychange event. could you think about it?

    opened by guirong 7
  • How to get this to work on a Marketo form?

    How to get this to work on a Marketo form?

    Hi! I am using placeholders for a Marketo form, which is loaded with a snippet of Javascript. Since that is a dynamic piece of content, how do I go about loading the placeholders script? Including it at the bottom of the body tag doesn't work. What happens is the placeholders briefly appear on page load, and then they disappear and the fields are blank. So I'm thinking something happens as the Marketo form loads that makes the placeholders disappear in IE7-8.

    opened by JAgatone 6
  • IE8: returning value

    IE8: returning value

    I'm developping an App in IE8 with yui3. With the onblur event of an input node I check if the value is empty or not to act on the input... When I use plcaeholders instead of an empty value ('')' I will get the placeholder text. (Same code works fine with IE9 and latest Chorme)

    node-input.on('blur', function(e) {
        if (e.target.get('value') != '') {
            // do someting
        } else {
            // do someting else
        }
    }, this);
    

    Is there a way to deal with that situation? Probably it is not a convenient way to wirte the placeholder text directly into the input...

    Thanks for Help! Felix

    opened by nyfelix 6
  • Write adapters for common DOM libraries

    Write adapters for common DOM libraries

    A common issue with Placeholders.js is "my DOM library method returns the value of the placeholder text instead of the empty string" (see #14 and #38 for examples).

    A possible solution is to write a suite of adapters that monkey-patch the methods in question of various DOM libraries and return the empty string when appropriate, delegating back to the original method otherwise.

    Libraries that should be covered:

    • jQuery
    • YUI
    • Prototype
    future-enhancement 
    opened by jamesallardice 5
  • Mess with maxlength only if specified

    Mess with maxlength only if specified

    It seems the previous patch was causing problems in Firefox 3.6 since it was returning -1 for the value of the maxlength attribute if the attribute was never supplied in the first place.

    This patch tries to detect if the maxlength was supplied, and only proceeds to manipulate it if it is present.

    Note: Unfortunately, I had no time to test this change in an actual browser. Please, please, test it in IE8 and Firefox 3.6 before merging. Thanks and sorry for the extra work.

    opened by paracycle 4
  • Adapters to patch jQuery, PrototypeJS and YUI3 methods

    Adapters to patch jQuery, PrototypeJS and YUI3 methods

    Adds adapters to patch:

    • jQuery $.fn.val
    • Prototype Form.Element.getValue and $F by extension
    • Prototype Form.Element.Methods.getValue
    • YUI3 get method (from the Node module)

    The adapters will return the empty string if the polyfill is active. If it's not active they delegate back to the real method.

    Also renames build output files so file names are all lower case.

    opened by jamesallardice 4
  • Hitting escape twice in IE causes password fields to be plain text

    Hitting escape twice in IE causes password fields to be plain text

    If using focus and blur to hide/show placeholder text rather than keydown Escape is not considered a bad key and there is no keypress handler. This allows IE to perform its default behavior clearing form text then if you tab into the password field anything you type will be clear text.

    Your gist appears to use the keydown event listener which behaves better as it does preventDefault on pressing the escape button.

    opened by csavio 4
  • [Suggestion] Add the version number in the build file

    [Suggestion] Add the version number in the build file

    It would be good to have a comment in the build file with the version number, allowing to check whether an update is needed or no. And it would be great if the website displays the latest version so that we can know about it.

    Additionally, you might want to create tags for the 2.0.x releases in the repo, as you used to do for the 1.x versions.

    future-enhancement 
    opened by stof 4
  • 'Placeholders' is undefined in IE8 with jQuery adapter

    'Placeholders' is undefined in IE8 with jQuery adapter

    When including placeholders.jquery.min.js after jQuery the following error is shown in Internet Explorer 8:

    'Placeholders' is undefined

    I've traced this back to line 8 of the jQuery adapter. I'm not sure why Placeholders is not defined here though. Perhaps an explicit call to window.Placeholders is necessary?

    If you need more information to resolve this please tell.

    opened by tommedema 3
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • Fixed when password field is selected on page load.

    Fixed when password field is selected on page load.

    When the timer reload, password field should not be set to "text". To reproduce the problem, autofocus a password field on page load in IE9.

    opened by kainr2 0
  • Maxlength attribute broken

    Maxlength attribute broken

    Placeholders.js code accesses maxlength attribute using the object notation in the showPlaceholder:

          if ( !maxLength ) {
            elem.setAttribute(ATTR_MAXLENGTH, elem.maxLength);
            elem.removeAttribute('maxLength');
          }
    

    The code is case sensitive and fetches attribute value as undefined if it's named in some other manner like maxlength or MAXLENGTH (at least for IE8).

    The undefined value is then written back in the hidePlaceholder.

    opened by devbranch-vadym 1
  • [IE11] Placeholder.nativeSupport not working

    [IE11] Placeholder.nativeSupport not working

    In some cases global.Placeholders is undefined, this is specially the case with IE11 (don't ask me why, I couldn't tell). Therefore the following snippet will fail:

    if ( !global.Placeholders.nativeSupport ) {

    This willl work: if ( !global.Placeholders || !global.Placeholders.nativeSupport ) {

    opened by CDRO 0
  • How to switch text off before validation and then put it back on after validation

    How to switch text off before validation and then put it back on after validation

    I have form validation running on form submit. As long as the placeholder submit handler fires first, it doesn't interfere with the form validation, because the values are cleared. But once any error messages have appeared, I'd like the placeholders to appear in any empty inputs again.

    opened by jayfresh 0
Releases(3.0.2)
  • 3.0.2(Nov 29, 2013)

    Stable version 3.0.2. Fixes include:

    • Ensure the maxlength attribute is handled correctly in Firefox 3.6 (#56)
    • Ensure Internet Explorer doesn't throw when there are no elements (#57)
    • Ensure Internet Explorer doesn't throw when using a form attribute on an element (#55)
    • Various bits of source code tidyup

    Download v3.0.2 at http://jamesallardice.github.io/Placeholders.js.

    Source code(tar.gz)
    Source code(zip)
  • 3.0.1(Nov 7, 2013)

    Stable version 3.0.1. Fixes include:

    • Ensure placeholders are not hidden incorrectly after form submissions in IE9 (#52)
    • Ensure placeholder styles are not lost on page reload in <= IE8 (#50)
    • Avoid the "IE9 active element of death" (#48)

    New stuff includes:

    • A link to the gem in the readme (#47)
    • A .editorconfig file to help improve consistency from contributors
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Oct 17, 2013)

    Stable version 3.0.0. Fixes include:

    • Placeholders no longer stay visible when the attribute is removed from the element
    • Placeholders are no longer shown if an element with a placeholder is added to the DOM with focus

    New features:

    • Adapters for jQuery, Prototype and YUI3 to patch DOM property accessors and return empty strings instead of the placeholder text where appropriate
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 11, 2013)

    Stable version 2.1.1. Fixes some minor issues:

    • The API methods no longer throw errors when used on platforms with native placeholder support
    • The wrong class name can no longer be removed from elements by mistake
    • Improved IE9 keyboard experience

    New features:

    • Version banner comment added to built files
    Source code(tar.gz)
    Source code(zip)
Owner
James Allardice
Software engineer with a passion for JavaScript. Co-founder of @orangejellyfish. Currently enjoying working with React, React Native, Node.js and Serverless.
James Allardice
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Bootstrap MaxLength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is

Maurizio 772 Dec 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This JavaScript class generates a placeholder image or default profile image as SVG or PNG

This JavaScript class generates a placeholder image or default profile image as SVG or PNG. You can use the following parameters in the constructor:

Nils Köpke 4 Oct 12, 2022
🎚 HTML5 input range slider element polyfill

rangeslider.js Simple, small and fast jQuery polyfill for the HTML5 <input type="range"> slider element. Check out the examples. Touchscreen friendly

André Ruffert 2.2k Jan 8, 2023
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

Selectivizr CSS3 selectors for IE 6-8 selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explor

Keith Clark 1.7k Dec 18, 2022
This package allows you to show a placeholder-component while inertia fetches the content of ne new page while routing

inertia vue placeholder middleware This package adds a component placeholder middleware for inertia vue. instead of the InertiaProgressBar you can sho

null 6 Jul 24, 2022
Simple and flexible, css only, content placeholder loading animation.

Placeholder loading Simple and flexible, css only, content placeholder loading animation. Demo https://zalog.github.io/placeholder-loading/ Take a loo

Catalin Zalog 1.4k Dec 30, 2022
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element

selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele

Fatih Kazancı 3 Oct 28, 2022
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Rik Roots 227 Dec 31, 2022
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
A window.fetch JavaScript polyfill.

window.fetch polyfill The fetch() function is a Promise-based mechanism for programmatically making web requests in the browser. This project is a pol

GitHub 25.6k Jan 4, 2023
Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill).

@sanity/client Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill). Requirements Sanity Clien

Sanity 23 Nov 29, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Jan 7, 2023
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Dec 30, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
A responsive image polyfill for , srcset, sizes, and more

Picturefill A responsive image polyfill. Authors: See Authors.txt License: MIT Picturefill has three versions: Version 1 mimics the Picture element pa

Scott Jehl 10k Dec 31, 2022