https://github.com/williamboman/angular-input-hints
[Angular 1.x] Animates input placeholders to make it look like they are being typed in realtime
https://github.com/williamboman/angular-input-hints
angular hint hinter hints input placeholder placeholder-text
Last synced: 12 days ago
JSON representation
[Angular 1.x] Animates input placeholders to make it look like they are being typed in realtime
- Host: GitHub
- URL: https://github.com/williamboman/angular-input-hints
- Owner: williamboman
- License: mit
- Created: 2014-05-08T20:08:51.000Z (over 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2017-02-02T11:33:31.000Z (almost 9 years ago)
- Last Synced: 2025-03-19T06:39:42.446Z (9 months ago)
- Topics: angular, hint, hinter, hints, input, placeholder, placeholder-text
- Language: JavaScript
- Homepage: https://williamboman.github.io/angular-input-hints/example/
- Size: 573 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
*Animates input placeholders to make it look like they are being typed in realtime.*
## Dependencies
- [angular](https://github.com/angular/angular.js) >=1.2
## Install
### Bower
```bash
$ bower install angular-input-hints --save
```
### Download
[Minified version - 2.82kB (1kB gzipped)](https://github.com/williamboman/angular-input-hints/releases/download/v2.0.0/angular-input-hints.min.js)
[Regular version - 5.01kB](https://github.com/williamboman/angular-input-hints/releases/download/v2.0.0/angular-input-hints.js)
Then simply just include the JavaScript file in your document!
## Usage
To use this Angular module, add `wb.inputHints` as a dependency in your Angular module.
```js
angular.module('yourApp', [..., 'wb.inputHints']);
```
To actually use it;
```html
```
**Of course, you can add any other attribute to the input elements as you would do normally.**
### Configuration
The default config values are;
- `waitBeforeDeleteMs` - 2000 ms
The amount of milliseconds to wait before starting to delete the placeholder (the amount of time the placeholder is fully readable).
- `waitInBetweenMs` - 300 ms
Amount of milliseconds to wait before starting to print the next placeholder.
- `writeSpeedMs` - 100 ms
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).
- `deleteSpeedMs` - 60 ms
Same as `writeSpeedMs` (see above), but for when deleting characters.
####There are 2 ways of changing these config values.
You can change these configuration values either specifically for just one element, or across the whole application.
To change these values for just one element, you can do like this;
```html
```
To change the default config values permanently, you can utilize the `inputHintsProvider` in an Angular config-block, like so;
```js
angular.module('yourApp', [..., 'wb.inputHints'])
// Immediately after registering your Angular module, change the config values.
.config(function (inputHintsProvider) {
inputHintsProvider.config.waitBeforeDeleteMs = 2000;
inputHintsProvider.config.waitInBetweenMs = 300;
inputHintsProvider.config.writeSpeedMs = 100;
inputHintsProvider.config.deleteSpeedMs = 60;
});
```
## Tips
Use the [`selector:placeholder`](http://css-tricks.com/snippets/css/style-placeholder-text/) CSS pseudo-class to style your placeholders!
## License
Licensed under the MIT license.
## Authors
**William Boman**