{"id":18034703,"url":"https://github.com/yuanqing/autosize-input","last_synced_at":"2025-06-16T03:35:50.382Z","repository":{"id":33755020,"uuid":"37410296","full_name":"yuanqing/autosize-input","owner":"yuanqing","description":":balloon: Effortless, dynamic-width text boxes in vanilla JavaScript","archived":false,"fork":false,"pushed_at":"2024-06-23T13:47:07.000Z","size":106,"stargazers_count":69,"open_issues_count":12,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-10T18:12:38.023Z","etag":null,"topics":["autosize","dom","forms","input","javascript","textbox"],"latest_commit_sha":null,"homepage":"https://codepen.io/lyuanqing/pen/xYpmKj","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuanqing.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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},"funding":{"ko_fi":"yuanqing","custom":"https://paypal.me/yuanqinglim"}},"created_at":"2015-06-14T11:46:50.000Z","updated_at":"2025-03-22T02:37:46.000Z","dependencies_parsed_at":"2024-10-30T11:13:34.062Z","dependency_job_id":null,"html_url":"https://github.com/yuanqing/autosize-input","commit_stats":{"total_commits":84,"total_committers":5,"mean_commits":16.8,"dds":"0.19047619047619047","last_synced_commit":"9783b84b30705f1626f1efb910c0d6177bf5d2f3"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/yuanqing/autosize-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fautosize-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fautosize-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fautosize-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fautosize-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanqing","download_url":"https://codeload.github.com/yuanqing/autosize-input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fautosize-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260090627,"owners_count":22957252,"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":["autosize","dom","forms","input","javascript","textbox"],"created_at":"2024-10-30T11:13:28.463Z","updated_at":"2025-06-16T03:35:50.337Z","avatar_url":"https://github.com/yuanqing.png","language":"JavaScript","funding_links":["https://ko-fi.com/yuanqing","https://paypal.me/yuanqinglim"],"categories":[],"sub_categories":[],"readme":"# autosize-input [![npm Version](http://img.shields.io/npm/v/autosize-input.svg?style=flat)](https://www.npmjs.org/package/autosize-input) [![Build Status](https://img.shields.io/travis/yuanqing/autosize-input.svg?branch=master\u0026style=flat)](https://travis-ci.org/yuanqing/autosize-input)\n\n\u003e Effortless, dynamic-width text boxes in vanilla JavaScript.\n\n- Dynamically adjusts the width of the text box to fit its current contents\n- Can be initialised to fit its `placeholder` attribute\n- Optionally set a `min-width` based on the element\u0026rsquo;s initial content\n- 718 bytes gzipped\n\n## Usage\n\n\u003e [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/xYpmKj)\n\n```html\n\u003cinput type=\"text\" id=\"foo\" value=\"Nice\"\u003e\n\u003cinput type=\"text\" id=\"bar\" placeholder=\"People\"\u003e\n\u003cinput type=\"text\" id=\"baz\" placeholder=\"Matter\"\u003e\n```\n\n```js\nconst autosizeInput = require('autosize-input')\n\nautosizeInput(document.querySelector('#foo'))\nautosizeInput(document.querySelector('#bar'))\nautosizeInput(document.querySelector('#baz'), { minWidth: true })\n```\n\n## API\n\n```js\nconst autosizeInput = require('autosize-input')\n```\n\n### autosizeInput(element [, options])\n\n`element` is a text `input` element, and `options` is an object literal.\n\n- Returns a \u0026ldquo;clean up\u0026rdquo; function for removing the event listener on the `element`.\n- If we do not want the text box to \u0026ldquo;contract\u0026rdquo; as the user starts to type, set `options.minWidth` to `true`. This will give the `element` a `min-width` that fits it initial contents (ie. either the element\u0026rsquo;s intial `value`, or its `placeholder`).\n\nSee [Usage](#usage).\n\n## Implementation details\n\n- A hidden \u0026ldquo;ghost\u0026rdquo; `div` element, assigned the same styles as the text box, is used to calculate the correct width to assign to the text box. This width is recomputed and assigned to the text box on every [`input`](https://developer.mozilla.org/en-US/docs/Web/Events/input) event.\n- The single \u0026ldquo;ghost\u0026rdquo; `div` is shared amongst all the \u0026ldquo;autosized\u0026rdquo; text boxes on the page.\n\n## Installation\n\nInstall via [yarn](https://yarnpkg.com):\n\n```sh\n$ yarn add autosize-input\n```\n\nOr [npm](https://npmjs.com):\n\n```sh\n$ npm install --save autosize-input\n```\n\n## Tests\n\nTo test manually, in the browser:\n\n```sh\n$ yarn start\n```\n\nTo run the programmatic tests:\n\n```sh\n$ yarn test\n```\n\n## Prior art\n\n- [jQuery.Autosize.Input](https://github.com/MartinF/jQuery.Autosize.Input)\n- [React-Input-Autosize](https://github.com/JedWatson/react-input-autosize)\n\nThis module was written because I needed a standalone, lightweight solution to this rather UI problem.\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fautosize-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanqing%2Fautosize-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fautosize-input/lists"}