{"id":19433404,"url":"https://github.com/foo4u/jquery-html5placeholders","last_synced_at":"2025-07-26T00:34:47.731Z","repository":{"id":2970986,"uuid":"3986109","full_name":"foo4u/jquery-html5placeholders","owner":"foo4u","description":"jQuery plugin to simplify working with HTML forms when HTML5 placeholder support is present.","archived":false,"fork":false,"pushed_at":"2014-02-17T23:41:42.000Z","size":274,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-10T10:59:57.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo4u.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-10T19:20:12.000Z","updated_at":"2019-10-23T11:46:38.000Z","dependencies_parsed_at":"2022-08-31T00:00:15.994Z","dependency_job_id":null,"html_url":"https://github.com/foo4u/jquery-html5placeholders","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo4u%2Fjquery-html5placeholders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo4u%2Fjquery-html5placeholders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo4u%2Fjquery-html5placeholders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo4u%2Fjquery-html5placeholders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo4u","download_url":"https://codeload.github.com/foo4u/jquery-html5placeholders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223948700,"owners_count":17230131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-11-10T14:39:43.590Z","updated_at":"2024-11-10T14:39:44.079Z","avatar_url":"https://github.com/foo4u.png","language":"JavaScript","readme":"jQuery HTML5 Placeholders Plugin\n================================\n\nProvides a [jQuery](http://jquery.com/) plugin to simplify working with HTML labels and HTML5 placeholders\nin form input tags.\n\nThis plugin aims to simplify development of forms in which you want display  `input` tags with HTML5 placeholders\ninstead of `label` tags on clients that support HTML5 but fall back to `label` tags when the placeholder attribute\nisn't supported while maintaining screen reader compatibility.\n\nYou code your forms with standard `label` elements and then invoke this plugin to convert those labels into\nplaceholders. The plugin operates using [progressive enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) to provide backwards compatibility with browsers lacking placeholder support.\n\nUsage\n-----\n\n\t\u003cscript type=\"text/javascript\" src=\"./jquery.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"./jquery.htm5placeholders.js\"\u003e\u003c/script\u003e\n\t\t\n\t\u003cscript type=\"text/javascript\"\u003e\n\t\t$(document).ready(function() {\n\t\t\t// replace formId with the id of your form element \n\t\t\t$('#formId').html5placeholders();\n\t\t});\n\t\u003c/script\u003e\n\nAs of release 1.2, the `hide` function is customizable, and by default, hides `label` tags using inline styles.\nTo restore behavior similiar to 1.0 and 1.1 releases, override the hide function:\n\n\t\u003cscript type=\"text/javascript\"\u003e\n\t\t$(document).ready(function() {\n\t\t\t$('#formId').html5placeholders({\n\t\t\t\thide: function(el) { el.hide() }\n\t\t\t});\n\t\t});\n\t\u003c/script\u003e\n\nIf you're using [Bootstrap][bootstrap] or already have a custom screen reader specific hide class you'd like to use,\noverride the `hide` function and apply that class to the `label` element:\n\n\t\u003cscript type=\"text/javascript\"\u003e\n\t\t$(document).ready(function() {\n\t\t\t$('#formId').html5placeholders({\n\t\t\t\thide: function(el) { el.addClass('sr-only'); }\n\t\t\t});\n\t\t});\n\t\u003c/script\u003e\n\nSample Code\n-----------\n\nCreate an HTML form with a label for each input:\n\n\t\u003cform id=\"testForm\" name=\"test\"\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003clabel for=\"name\"\u003eFirst \u0026amp; Last Name\u003c/label\u003e\n\t\t\t\u003cinput id=\"name\" type=\"text\" name=\"name\" /\u003e\n\t\t\u003c/div\u003e\n\t\u003c/form\u003e\n\nOn browsers that support HTML5 placeholders, this plugin converts the form to:\n\n\t\u003cform id=\"testForm\" name=\"test\"\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003cinput id=\"name\" type=\"text\" name=\"name\" placeholder=\"First \u0026amp; Last Name\" /\u003e\n\t\t\u003c/div\u003e\n\t\u003c/form\u003e\n\nDemo\n----\n\nThis plugin will progressively enhance an HTML form by hiding labels and using the label text as a placeholder\nin the input field.\n\n![Before Enhancement][before_image]\n\nThis will be converted to the view below, only if the browser supports placeholders.\n\n![After Enhancement][after_image]\n\n\nRequirements\n------------\n\nThis plugin requires [jQuery](http://jquery.com/) 1.4 or newer.\n\nTesting\n-------\n\nTested with desktop browsers:\n\n* Google Chrome / Mac OS\n* Safari / Mac OS\n* IE 9 / Windows 7\n\nTested with mobile browsers:\n\n* Mobile Safari / iOS 5\n* Google Chrome / Android 4.0\n* IE 9 / Windows Phone 7.5\n\n[before_image]: https://s3.amazonaws.com/jquery-html5placeholders/html5placeholder_demo_before.png\n[after_image]: https://s3.amazonaws.com/jquery-html5placeholders/html5placeholder_demo_after.png\n[bootstrap]: http://getbootstrap.com\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo4u%2Fjquery-html5placeholders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo4u%2Fjquery-html5placeholders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo4u%2Fjquery-html5placeholders/lists"}