{"id":13397335,"url":"https://github.com/LeaVerou/stretchy","last_synced_at":"2025-03-13T23:32:20.523Z","repository":{"id":45928254,"uuid":"39686311","full_name":"LeaVerou/stretchy","owner":"LeaVerou","description":"Form element autosizing, the way it should be","archived":false,"fork":false,"pushed_at":"2023-12-15T06:23:35.000Z","size":345,"stargazers_count":1274,"open_issues_count":18,"forks_count":88,"subscribers_count":34,"default_branch":"main","last_synced_at":"2024-10-29T17:57:35.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stretchy.verou.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LeaVerou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-07-25T13:26:17.000Z","updated_at":"2024-10-06T18:45:00.000Z","dependencies_parsed_at":"2024-06-20T22:01:16.942Z","dependency_job_id":null,"html_url":"https://github.com/LeaVerou/stretchy","commit_stats":{"total_commits":66,"total_committers":12,"mean_commits":5.5,"dds":"0.24242424242424243","last_synced_commit":"68bc05935f43cb76b6ebdf8a217b0eea1ab733ed"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fstretchy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fstretchy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fstretchy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeaVerou%2Fstretchy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeaVerou","download_url":"https://codeload.github.com/LeaVerou/stretchy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242853803,"owners_count":20196101,"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-07-30T18:01:17.935Z","updated_at":"2025-03-13T23:32:20.071Z","avatar_url":"https://github.com/LeaVerou.png","language":"JavaScript","funding_links":[],"categories":["CSS","JavaScript","Form Widgets","Form Widgets [🔝](#readme)","UI","表单组件"],"sub_categories":["Other","其它"],"readme":"\u003cheader\u003e\n\n\u003cimg src=\"https://stretchy.verou.me/logo.svg#notext\" width=\"200\"\u003e\n\t\n# Stretchy\n\nForm element autosizing, the way it should be!\n\n\u003c/header\u003e\n\n\u003csection id=\"features\"\u003e\n\n# Features\n\n- **Handles multiple types of form controls** Textareas? Inputs? Select menus? You name it!\n- **Tiny footprint** [Less than 1.5KB](https://bundlephobia.com/package/stretchy) minified and gzipped!\n- **Automatically accounts for newly added controls** via mutation observers\n- **Restrict form controls by a selector** …or don’t and autosize all your form controls!\n- **Completely standalone** no jQuery or other dependencies\n- **Plays well with existing HTML/CSS** Follows placeholders, styling, `min/max-width/height` constraints, transitions\n- **No JS knowledge required** Everything can be configured just via HTML!\n- **[Works in all modern browsers](#browser-support)** ([v1 even works in old browsers](#v1-browser-support-notes))\n- **Written in ESM** Available in ESM, CJS, and good ol' globals\n- **Works in Shadow DOM** Use it in your web components!\n\n\u003c/section\u003e\n\n\u003csection id=\"usage\"\u003e\n\n# Usage\n\n\u003csection id=\"iife\"\u003e\n\n## Good ol’ `\u003cscript\u003e` element\n\nThis method is optimal if you don't need much control, and would rather avoid writing any JS.\n\nJust include the script anywhere in the page:\n\n```html\n\u003cscript src=\"https://stretchy.verou.me/dist/stretchy.iife.min.js\" async\u003e\u003c/script\u003e\n```\n\nIf you include Stretchy this way it will run automatically and you don’t need to do anything else (unless you want to [customize which elements it applies to](#filter)).\n\n\u003c/section\u003e\n\n\u003csection id=\"esm\"\u003e\n\n## ESM (v2.0.0+)\n\nThis method is ideal if you are including Stretchy as a dependency on a larger project and want to prevent any side effects.\n\n```js\nimport * as Stretchy from \"https://stretchy.verou.me/dist/stretchy.min.js\";\nStretchy.init();\n```\n\n\u003c/section\u003e\n\n\u003csection id=\"cjs\"\u003e\n\n## CommonJS (v2.0.0+)\n\nA CommonJS build is also available. `require(\"stretchy\")` should work on Node.\n\n## Local files\n\nAll three of the above methods can be used with your own local files as well.\nYou can download Stretchy [here](https://www.jsdelivr.com/package/npm/stretchy).\n\nnpm works like you’d expect too:\n\n```\nnpm install stretchy\n```\n\n\u003c/section\u003e\n\n\u003c/section\u003e\n\n\u003csection id=\"filter\"\u003e\n\n# Which elements does Stretchy resize?\n\nBy default, Stretchy resizes all `\u003ctextarea\u003e`s, `\u003cselect\u003e` menus with no `size` attribute and `\u003cinput\u003e` elements that are text fields (e.g. with no `type` attribute, or with one equal to `text`, `tel`, `email`, `url`).\n\nTo limit that set further you can set an additional filter, via a CSS selector. There are two ways to specify a filter: via HTML attributes (if you'd prefer to avoid writing JS) or via JS.\n\n## Via HTML attributes:\n\nUse the `data-stretchy-filter` attribute, on any element. Note that this means you can use the attribute on the `\u003cscript\u003e` element that calls Stretchy itself, in which case you can also shorten its name to `data-filter`.\n\nFor example, to restrict it to elements that either have the `foo` class or are inside another element that does, you could use `data-stretchy-filter=\".foo, .foo *\"` on an element or call Stretchy like this:\n\n```html\n\u003cscript src=\"stretchy.min.js\" data-filter=\".foo, .foo *\" async\u003e\u003c/script\u003e\n```\n\nIf you specify the `data-stretchy-filter` attribute on multiple elements, the last value (in source order) wins. `data-filter` directly on Stretchy’s `\u003cscript\u003e` element takes priority over any `data-stretchy-filter` declaration.\n\n## Via JS\n\nIf you want to avoid modifying the markup, you can use JavaScript instead:\n\n```javascript\nStretchy.selectors.filter = \".foo, .foo *\";\n```\n\nNote that if you are [including Stretchy via a `\u003cscript\u003e` element](#iife), it will run as soon as the document is ready, which may be before you’ve set a filter.\n\tYou need to ensure that line runs \u003cem\u003eafter Stretchy has loaded\u003c/em\u003e (so that the `Stretchy` object is available) and \u003cem\u003ebefore the DOM is ready\u003c/em\u003e.\n\tTo avoid this hassle, I'd recommend using attributes to set the filter if you include Stretchy that way, or [including Stretchy as a module](#esm) if you want\n\t\tto customize its settings via JS.\n\n\u003c/section\u003e\n\n\u003csection id=\"api\"\u003e\n\n# JavaScript API\n\nStretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so \u003cstrong\u003eyou do not need to call any API methods for adding new elements\u003c/strong\u003e via scripting (e.g. AJAX).\n\nIf needed, these are Stretchy’s API methods:\n\n| Property or Method | Description |\n|--------------------|-------------|\n| `init([root])` | Resize controls inside a given element, and monitor for changes. `root` can be any `Node`, including Shadow roots. |\n| `resize(element)` | Autosize one element based on its content. Note that this does not set up any event listeners, it just calculates and sets the right dimension (width or height, depending on the type of control) once.\n| `resizeAll([elements \\| selector, [root]])` | Apply `Stretchy.resize()` to a collection of elements, or all Stretchy is set to apply to, if no argument is provided. |\n| `resizes(element)` | Can Stretchy be used on this particular element? (checks if element is in the DOM, if it's of the right type and if it matches the selector filter provided by `data-stretchy-selector`, if the attribute is set. |\n| `selectors.base` | CSS selector to tell Stretchy which elements *can* be resized. Defaults to `input, select, textarea`. Main use case for modifying this is in case you have a custom element that behaves like these and want Stretchy to stop ignoring it. If you just want to filter which elements Stetchy resizes, use `filter` below. |\n| `selectors.filter` | CSS selector that elements need to match to be resized. |\n| `active` | Boolean. Set to `false` to temporarily disable Stretchy globally.` |\n\n\u003c/section\u003e\n\n\u003csection id=\"browser-support\"\u003e\n\n# Browser support\n\n\u003cmd-block src=\".browserslistrc\" hmin=\"2\"\u003e\n\nAll modern browsers.\nFor details, see [.browserslistrc](.browserslistrc)\n\n\u003c/md-block\u003e\n\n## v1 Browser Support Notes\n\nStretchy v1 worked in Chrome, FF 3.6, IE9, Opera, Safari, Android \u0026 more.\n\n- On [browsers that do not support mutation observers](http://caniuse.com/#feat=mutationobserver), you have to manually call `Stretchy.resize()` on new elements.\n- IE has an issue with `\u003cinput\u003e` elements, due to it misreporting `scrollWidth`. If this matters to you, you can use [this polyfill](https://github.com/gregwhitworth/scrollWidthPolyfill) by Greg Whitworth (under development).\n\n\u003c/section\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeaVerou%2Fstretchy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLeaVerou%2Fstretchy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeaVerou%2Fstretchy/lists"}