{"id":17955034,"url":"https://github.com/williamboman/angular-input-hints","last_synced_at":"2025-12-12T04:27:08.144Z","repository":{"id":16827907,"uuid":"19587248","full_name":"williamboman/angular-input-hints","owner":"williamboman","description":"[Angular 1.x] Animates input placeholders to make it look like they are being typed in realtime","archived":false,"fork":false,"pushed_at":"2017-02-02T11:33:31.000Z","size":587,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-03-19T06:39:42.446Z","etag":null,"topics":["angular","hint","hinter","hints","input","placeholder","placeholder-text"],"latest_commit_sha":null,"homepage":"https://williamboman.github.io/angular-input-hints/example/","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/williamboman.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}},"created_at":"2014-05-08T20:08:51.000Z","updated_at":"2018-03-31T10:52:58.000Z","dependencies_parsed_at":"2022-07-15T07:00:41.395Z","dependency_job_id":null,"html_url":"https://github.com/williamboman/angular-input-hints","commit_stats":null,"previous_names":["williamboman/angular-input-placeholders"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamboman%2Fangular-input-hints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamboman%2Fangular-input-hints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamboman%2Fangular-input-hints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamboman%2Fangular-input-hints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williamboman","download_url":"https://codeload.github.com/williamboman/angular-input-hints/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245381474,"owners_count":20606041,"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":["angular","hint","hinter","hints","input","placeholder","placeholder-text"],"created_at":"2024-10-29T10:23:42.993Z","updated_at":"2025-12-12T04:27:03.111Z","avatar_url":"https://github.com/williamboman.png","language":"JavaScript","readme":"![angular-input-hints](angular-input-hints.gif)\n\n*Animates input placeholders to make it look like they are being typed in realtime.*\n\n## Dependencies\n\n- [angular](https://github.com/angular/angular.js) \u003e=1.2\n\n## Install\n\n### Bower\n\n```bash\n$ bower install angular-input-hints --save\n```\n### Download\n\n[Minified version - 2.82kB (1kB gzipped)](https://github.com/williamboman/angular-input-hints/releases/download/v2.0.0/angular-input-hints.min.js)\n\n[Regular version - 5.01kB](https://github.com/williamboman/angular-input-hints/releases/download/v2.0.0/angular-input-hints.js)\n\nThen simply just include the JavaScript file in your document!\n\n## Usage\n\nTo use this Angular module, add `wb.inputHints` as a dependency in your Angular module.\n\n```js\nangular.module('yourApp', [..., 'wb.inputHints']);\n```\n\nTo actually use it;\n\n```html\n\u003cinput input-hints=\"['Your first placeholder!', 'Your second placeholder.', 'And so on..']\" /\u003e\n\u003c!-- or use variables in your scope --\u003e\n\u003cinput input-hints=\"scopeVariable\" /\u003e\n```\n\n**Of course, you can add any other attribute to the input elements as you would do normally.**\n\n### Configuration\n\nThe default config values are;\n- `waitBeforeDeleteMs` - 2000 ms\n\n The amount of milliseconds to wait before starting to delete the placeholder (the amount of time the placeholder is fully readable).\n- `waitInBetweenMs` - 300 ms\n\n  Amount of milliseconds to wait before starting to print the next placeholder.\n\n- `writeSpeedMs` - 100 ms\n\n  The absolute slowest speed to wait between printing characters (characters are printed at random intervals that span from 0 ms to whatever this config value is set to).\n\n- `deleteSpeedMs` - 60 ms\n\n  Same as `writeSpeedMs` (see above), but for when deleting characters.\n\n\n####There are 2 ways of changing these config values.\n\nYou can change these configuration values either specifically for just one element, or across the whole application.\n\nTo change these values for just one element, you can do like this;\n\n```html\n\u003cinput type=\"text\"\n  input-hints=\"['Lorem Ipsum...', 'Foo bar baz.']\"\n  wait-before-deleting=\"2000\"\n  wait-in-between=\"300\"\n  write-speed=\"100\"\n  delete-speed=\"60\"\u003e\n```\n\nTo change the default config values permanently, you can utilize the `inputHintsProvider` in an Angular config-block, like so;\n\n```js\nangular.module('yourApp',  [..., 'wb.inputHints'])\n  // Immediately after registering your Angular module, change the config values.\n  .config(function (inputHintsProvider) {\n    inputHintsProvider.config.waitBeforeDeleteMs = 2000;\n    inputHintsProvider.config.waitInBetweenMs = 300;\n    inputHintsProvider.config.writeSpeedMs = 100;\n    inputHintsProvider.config.deleteSpeedMs = 60;\n  });\n```\n\n## Tips\n\nUse the [`selector:placeholder`](http://css-tricks.com/snippets/css/style-placeholder-text/) CSS pseudo-class to style your placeholders!\n\n## License\n\nLicensed under the MIT license.\n\n## Authors\n\n**William Boman** \u003cwilliam@redwill.se\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamboman%2Fangular-input-hints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliamboman%2Fangular-input-hints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamboman%2Fangular-input-hints/lists"}