{"id":49453610,"url":"https://github.com/ginader/HTML5-placeholder-polyfill","last_synced_at":"2026-06-02T05:00:39.446Z","repository":{"id":2153400,"uuid":"3098578","full_name":"ginader/HTML5-placeholder-polyfill","owner":"ginader","description":"Small and robust polyfill for the HTML5 placeholder attribut. ","archived":false,"fork":false,"pushed_at":"2016-03-23T22:29:53.000Z","size":297,"stargazers_count":219,"open_issues_count":25,"forks_count":82,"subscribers_count":11,"default_branch":"master","last_synced_at":"2026-02-19T12:42:56.857Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ginader.png","metadata":{"files":{"readme":"readme.markdown","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-GPL","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-01-04T00:41:56.000Z","updated_at":"2026-02-06T03:52:37.000Z","dependencies_parsed_at":"2022-08-28T20:10:34.500Z","dependency_job_id":null,"html_url":"https://github.com/ginader/HTML5-placeholder-polyfill","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ginader/HTML5-placeholder-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginader%2FHTML5-placeholder-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginader%2FHTML5-placeholder-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginader%2FHTML5-placeholder-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginader%2FHTML5-placeholder-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ginader","download_url":"https://codeload.github.com/ginader/HTML5-placeholder-polyfill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ginader%2FHTML5-placeholder-polyfill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33806987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-02T02:00:07.132Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-30T04:01:03.701Z","updated_at":"2026-06-02T05:00:39.406Z","avatar_url":"https://github.com/ginader.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"HTML5 placeholder Polyfill\n==========================\n\nLightweight and very robust little jQuery plugin that generates the look and feel of the HTML5 placeholder attribute for browsers without native support. It also adds an extra title in case the placeholder text is too long to be displayed.\nThe polyfill comes with an option to define if the placeholder text should be read to screenreaders or not (on by default). Since version 1.9 the default option is to make it behave like Chrome or mobile Safari (hide placeholder when the users enters content rather than when the fields receives focus).\n\nDemos:\n------\n__To see the actual work of this polyfill use an old browser like Firefox 3.6!__\n\n* __[check out the DEMO](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/)__\n* __[check out the Chrome style DEMO](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-chromeish.html)__\n* __[check out the DEMO using Modernizr to load the Polyfill](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/docs/index-modernizr.html)__ (Thanks to Modernizr/yepnope nothing needs to get loaded when the Browser natively supports the placeholder)\n\n\nDependencies:\n-------------\n\n### Required:\n\n* [jQuery](http://jquery.com/) (tested with 1.6.2 but might as well work with older versions)\n\n### Optional but recommended:\n\n* [Modernizr](http://www.modernizr.com/) (tested with 2.0.6) OR [yepnope.js](http://yepnopejs.com/)\n\t* yepnope.js is included with Modernizr by default. Just make sure the setting in the Extras-Block: \"Modernizr.load (yepnope.js)\" is checked on the [Modernizr Download Page](http://modernizr.com/download/)\n\n* [fontresize](https://github.com/johnantoni/jquery.onfontresize) (excellent even though terribly unmaintained event plugin that fires when a user changes the font size of their browser (that usually breaks the other placeholder polyfills))\n\n### Optional\n\n#### Required if hiding the placeholder when user types instead of onfocus (like Chrome or mobile Safari) {hideOnFocus : false}\n\n* [requestAnimationFrame polyfill](https://gist.github.com/1579671) better than a simple timeout loop as browsers can slow the loop down when it's not the active window\n\n### Highly optional\n\n#### only needed if you want users to be able to resize textareas:\n\n* [jquery-resize](https://github.com/cowboy/jquery-resize) if included a repositioning is triggered when a user resizes a textarea. If not I disable the resizing of textareas to avoid rendering problems\n\n\nBrowser Support\n---------------\n\nThe placeholder attribute has decent support across current Browsers. This script adds support for the older generations including:\n\n* Internet Explorer \u003c 10\n* Firefox \u003c 4.0\n* Safari \u003c 4.0\n* iOS Safari \u003c 4.0\n* Android Browser \u003c 2.0\n\nFor more details on native support see the browser suppport table at [caniuse.com](http://caniuse.com/#search=placeholder).\n\nInstallation\n------------\n\nYou can install HTML5 placeholder Polyfill by using [Bower](http://bower.io).\n\n```bash\nbower install html5-placeholder-polyfill\n```\n\nUSAGE:\n------\n\n### Simply include the Javascript and CSS. The Polyfill will only run when needed.\n\n\t\u003chead\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"placeholder_polyfill.min.css\"\u003e\n\t\t\u003cscript src=\"placeholder_polyfill.jquery.min.combo.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\nPlease bear in mind that every input needs a linked label in order for the plugin to work.\n\n### Using [Modernizr](http://www.modernizr.com/), modern browser don't even have to load the polyfill at all.\n\n\t\u003cscript\u003e\n\tModernizr.load({\n\t    test: Modernizr.input.placeholder,\n\t    nope: [\n\t\t\t\t'placeholder_polyfill.min.css',\n\t\t\t\t'placeholder_polyfill.jquery.min.combo.js'\n\t          ]\n\t});\n\t\u003c/script\u003e\n\n### Using [yepnope.js](http://yepnopejs.com/) (used as load() in Modernizr), the same as with Modernizr, but with manual feature detection.\n\n\t\u003cscript\u003e\n\tyepnope({\n\t    test: ('placeholder' in $('\u003cinput\u003e')[0]),\n\t    nope: [\n                'placeholder_polyfill.min.css',\n                'placeholder_polyfill.jquery.min.combo.js'\n\t          ]\n\t});\n\t\u003c/script\u003e\n\n### Configuring the behavior (optional)\n\n\t\u003chead\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"placeholder_polyfill.min.css\"\u003e\n\t\t\u003cscript\u003e\n    \tplaceHolderConfig = {\n    \t\t// css class that is used to style the placeholder\n            \tclassName: 'placeholder',\n            // expose the placeholder text to screenreaders or not\n\t            visibleToScreenreaders : true,\n\t        // css class is used to visually hide the placeholder\n\t\t        visibleToScreenreadersHideClass : 'placeholder-hide-except-screenreader',\n\t\t    // css class used to hide the placeholder for all\n\t            visibleToNoneHideClass : 'placeholder-hide',\n            // either hide the placeholder on focus or on type\n\t            hideOnFocus : false,\n            // remove this class from a label (to fix hidden labels)\n\t            removeLabelClass : 'visuallyhidden',\n\t        // replace the label above with this class\n\t            hiddenOverrideClass : 'visuallyhidden-with-placeholder',\n            // allow the replace of the removeLabelClass with hiddenOverrideClass or not\n\t            forceHiddenOverride : true,\n            // apply the polyfill even for browser with native support\n\t            forceApply : false,\n            // init automatically or not\n            \tautoInit : true\n    \t}\n    \t\u003c/script\u003e\n\t\t\u003cscript src=\"placeholder_polyfill.jquery.min.combo.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\n### Customizing the styling (optional)\n\t\u003chead\u003e\n\t\t\u003cstyle\u003e\n\t\t\t/* Example how to style the placeholder itself */\n\t\t\t::-webkit-input-placeholder, /* Chrome/Opera/Safari */\n\t\t\t::-moz-placeholder, /* Firefox 19+ */\n\t\t\t:-ms-input-placeholder, /* IE 10+ */\n\t\t\t:-moz-placeholder, /* Firefox 18- */\n\t\t\t::placeholder, /* standard */\n\t\t\tlabel .placeholder  /* this polyfill */\n\t\t\t{\n\t\t\t    color:red; /* your awesome style for the the placeholder text */\n\t\t\t}\n\n\t\t\t/* Example how to style the :placeholder-shown pseudo class so it works with this polyfill: */\n\t\t\tinput:placeholder-shown,\n\t\t\tinput.placeholder-shown  /* just duplicate the selector and change the :peudo selector to a .class selector */\n\t\t\t{\n\t\t\t    border: 2px solid red /* your awesome style for the input element when the placeholder is visible */\n\t\t\t}\n\t\t\u003c/style\u003e\n\t\u003c/head\u003e\n\nVERSION HISTORY\n---------------\n\n[See the complete Version History here](http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/web/version-history.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fginader%2FHTML5-placeholder-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fginader%2FHTML5-placeholder-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fginader%2FHTML5-placeholder-polyfill/lists"}