JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" name="email" placeholder="емейл" tabindex=1>
<div class="email-suggestion">Возможно, вы имели в виду <a href="#" class="apply" title="Заменить на этот емейл"><span>user</span>@<b>domain.com</b></a>? <a href="#" class="close" title="Не, всё правильно">✖</a></div>
<input type="password" name="pwd" placeholder="пароль" tabindex=2>
CSS
body, input {font: 17px arial;}
body {padding: 20px;}
input {padding: 3px; display: block; width: 300px;}
input[name=pwd] {margin-top: 20px;}
.email-suggestion {display: none; font-style: italic; font-size: 13px; padding-top: 5px;}
.email-suggestion a {text-decoration: none; border-bottom: 1px dashed blue;}
a.close {color: #aaa; border: none; font-style: normal;}
a.close:hover {color: #000;}
JavaScript
/*
* Mailcheck https://github.com/Kicksend/mailcheck
* Author
* Derrick Ko (@derrickko)
*
* License
* Copyright (c) 2012 Receivd, Inc.
*
* Licensed under the MIT License.
*
* v 1.0.1
*/
(function($){
$.fn.mailcheck = function(opts, optsAlt) {
var defaultDomains = ["yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", "aol.com", "mac.com",
"live.com", "comcast.net", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk",
"facebook.com", "verizon.net", "sbcglobal.net", "att.net", "gmx.com", "mail.com",
"mail.ru", "inbox.ru", "list.ru", "bk.ru", "rambler.ru", "lenta.ru", "myrambler.ru",
"autorambler.ru", "ro.ru", "r0.ru", "yandex.ru", "ya.ru", "яндекс.рф", "habrahabr.ru", "ua.com", "ui.com"];
if (typeof opts === 'object' && optsAlt === undefined) {
// only opts is passed in
opts.domains = opts.domains || defaultDomains;
} else {
// domains are passed in as opts
var domains = opts;
opts = optsAlt;
opts.domains = domains || defaultDomains;
}
var result = Kicksend.mailcheck.suggest(this.val(), opts.domains);
if (result) {
if (opts.suggested) {
opts.suggested(this, result);
}
} else {
if (opts.empty) {
opts.empty(this);
}
}
};
})(jQuery);
var Kicksend = {
mailcheck : {
threshold: 3,
suggest: function(email, domains) {
email = email.toLowerCase();
var emailParts = this.splitEmail(email);
var closestDomain = this.findClosestDomain(emailParts.domain, domains);
if (closestDomain) {
return { address: emailParts.address, domain: closestDomain, full: emailParts.address + "@" + closestDomain }
} else {
return false;
}
},
findClosestDomain: function(domain, domains) {
var dist;
var minDist = 99;
var closestDomain = null;
for (var i = 0; i...