smart-email-field
v1.0.0
Published
Gives your email fields nice autocomplete of common email domains
Downloads
2
Readme
Readme
- Test in browsers you care about
Todo
- Add tests
- Add minified version
- Add bower and npm, publish
- Provide examples
- Write a guide
- can have multiple elements
- elements can have whatever styles
- email fields must have IDs
- fields on which the plugin is initialized are wrapped in .sef-wrapper class
Smart Email Field
Smart Email Field adds autocompletion of popular email domains to your inputs.
Right arrow autocompletes the suggestion.
Demo
http://petarslovic.github.io/ng-post-message/
Dependencies
No dependencies. Vanilla JS.
Install
Get the files
NPMnpm install smart-email-field --save
Bowerbower install smart-email-field --save
Include the files in your app
<script src="smart-email-field.min.js"></script>
Documentation
Usage
Important - Email fields must have ID attributes, otherwise the plugin won't work as expected.
There are a few ways to instantiate the plugin.
Given a few email fields:
<input type="email" class="email-field">
<input type="email" class="email-field">
<input type="email" id="email-1">
Via selector
var smartEmail = new SmartEmailField('.email-field')
This will make only the first input into a SmartEmailField. SmartEmailField uses document.querySelector
if you pass a string.
Via DOM Element
var emailElement = document.querySelector('#email-1');
var smartEmail1 = new SmartEmailField(emailElement);
If you are using jQuery
var $email = $('#emial-1');
var smartEmail1 = new SmartEmailField($email.get(0));
// or
var smartEmail1 = new SmartEmailField($email[0]);
If you have multiple email fields on the page
[].slice.call(document.querySelectorAll('.my-email')).map(el => new SmartEmailField(el));
jQuery:
$('.my-email').each($el => new SmartEmailField($el[0]));
Configuration
To configure SmartEmailField, pass options as the second parameter to constructor:
var myEmail = new SmartEmailField('#my-email', {
shadowStyle: {
color: 'rgba(0, 0, 0, 0.3)'
}
})
Options
- shadowStyle
Set the style of the shadow element. This affects the background color of the email field, or the color of autocomplete text, or any other property.
How it works
It's pretty simple:
- we have a email field
- we wrap it with a div
- add a shadow div behind
- copy the styles of email field to shadow div
- make email field's background transparent, so we can see the shadow field
- fill shadow filed with suggestion text
Development
git checkout gh-pages
- run
npm install && bower install
- write your code then run
grunt
- git commit your changes
- copy over core files (.js and .css/.less for directives) to master branch
git checkout master
git checkout gh-pages post-message.js post-message.min.js
- update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
- git commit changes
- git tag with the version number, i.e.
git tag v1.0.0
- create github repo and push
- [if remote does not already exist or is incorrect]
git remote add origin [github url]
git push origin master --tags
(want to push master branch first so it is the default on github)git checkout gh-pages
git push origin gh-pages
- (optional) register bower component
bower register ng-post-message [git repo url]