Описание
Как установить?
Хочу вам представить очень простой и полезный скрипт для вашего сайта, он облегчит вам всю работу, а точнее новым пользователям для заполнения почтовой формы. На uScript вышел недавно такой скрипт (2$ - жесть за это )
Принцип данного скрипта очень просто пользователь вводит свою почту и при указе почтового знака будут подбираться некоторые варианты. А чтобы скрипт заработал вам нужно изменить значение на свои.
Установка:
1. Добавим js
Разберем скрипт:
1. Вместо input вставляем вашу переменную поля.
2. Добавление Email думаем понятно всем, код одинаков меняем свое окончание только или добавляем новые!.
3. Если ваша страница не имеет кода редактирования в админе то добавляем в js:
$('body').append('<div id="all-mail"></div>');
Где body заменяем на вашу переменную в котором находиться ваш INPUT.
3. Добавим Css
Принцип данного скрипта очень просто пользователь вводит свою почту и при указе почтового знака будут подбираться некоторые варианты. А чтобы скрипт заработал вам нужно изменить значение на свои.
Установка:
1. Добавим js
Код
$(function () {
function mMail() {
var mMail = $('input').val();
if(mMail.length > 3 | mMail.indexOf('@') != -1) {
$('#all-mail').html('<div class="myMail"><i>'+mMail+'</i>@bk.ru</div><div class="myMail"><i>'+mMail+'</i>@ro.ru</div><div class="myMail"><i>'+mMail+'</i>@ya.ru</div><div class="myMail"><i>'+mMail+'</i>@me.com</div><div class="myMail"><i>'+mMail+'</i>@gmx.com</div><div class="myMail"><i>'+mMail+'</i>@list.ru</div><div class="myMail"><i>'+mMail+'</i>@mail.ru</div><div class="myMail"><i>'+mMail+'</i>@gmail.com</div><div class="myMail"><i>'+mMail+'</i>@inbox.ru</div><div class="myMail"><i>'+mMail+'</i>@lenta.ru</div><div class="myMail"><i>'+mMail+'</i>@yandex.ru</div><div class="myMail"><i>'+mMail+'</i>@yahoo.ru</div><div class="myMail"><i>'+mMail+'</i>@hotmail.ru</div><div class="myMail"><i>'+mMail+'</i>@outlook.ru</div>').show();
} else {$('#all-mail').hide();}
myMail();
if(mMail.indexOf('@') != -1 || mMail.indexOf('.') != -1 || mMail.indexOf(' ') != -1) {$('#all-mail').hide();}
};
function myMail() {
$('.myMail').click(function () {
var mThismail = $(this).html();
mThismail = mThismail.replace('<i>','').replace('</i>','');
$('#all-mail').hide();
$('input').val(mThismail);
});
$(document).click(function () {$('#all-mail').hide();});
};
$('input').keyup(function () {
mMail();
});
});
function mMail() {
var mMail = $('input').val();
if(mMail.length > 3 | mMail.indexOf('@') != -1) {
$('#all-mail').html('<div class="myMail"><i>'+mMail+'</i>@bk.ru</div><div class="myMail"><i>'+mMail+'</i>@ro.ru</div><div class="myMail"><i>'+mMail+'</i>@ya.ru</div><div class="myMail"><i>'+mMail+'</i>@me.com</div><div class="myMail"><i>'+mMail+'</i>@gmx.com</div><div class="myMail"><i>'+mMail+'</i>@list.ru</div><div class="myMail"><i>'+mMail+'</i>@mail.ru</div><div class="myMail"><i>'+mMail+'</i>@gmail.com</div><div class="myMail"><i>'+mMail+'</i>@inbox.ru</div><div class="myMail"><i>'+mMail+'</i>@lenta.ru</div><div class="myMail"><i>'+mMail+'</i>@yandex.ru</div><div class="myMail"><i>'+mMail+'</i>@yahoo.ru</div><div class="myMail"><i>'+mMail+'</i>@hotmail.ru</div><div class="myMail"><i>'+mMail+'</i>@outlook.ru</div>').show();
} else {$('#all-mail').hide();}
myMail();
if(mMail.indexOf('@') != -1 || mMail.indexOf('.') != -1 || mMail.indexOf(' ') != -1) {$('#all-mail').hide();}
};
function myMail() {
$('.myMail').click(function () {
var mThismail = $(this).html();
mThismail = mThismail.replace('<i>','').replace('</i>','');
$('#all-mail').hide();
$('input').val(mThismail);
});
$(document).click(function () {$('#all-mail').hide();});
};
$('input').keyup(function () {
mMail();
});
});
Разберем скрипт:
1. Вместо input вставляем вашу переменную поля.
2. Добавление Email думаем понятно всем, код одинаков меняем свое окончание только или добавляем новые!.
3. Если ваша страница не имеет кода редактирования в админе то добавляем в js:
Код
$('body').append('<div id="all-mail"></div>');
Где body заменяем на вашу переменную в котором находиться ваш INPUT.
3. Добавим Css
Код
div#all-mail {display:none;
position: absolute;
padding: 5px;
background: #344149;
color: #fff;
margin: 10px 0px 0px 10px;
border: 1px solid #000;
border-radius: 2px;
}
div#all-mail:after, div#all-mail:before {
bottom: 100%;
left: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div#all-mail:after {
border-color: rgba(52, 65, 73, 0);
border-bottom-color: #344149;
border-width: 8px;
margin-left: -8px;
}
div#all-mail:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 9px;
margin-left: -9px;
}
.myMail {
cursor: pointer;
padding: 2px 10px 5px 0px;
margin-top: 5px;
font-size: 12px;
font-family: sans-serif;
}
.myMail:hover {
background: rgba(0, 0, 0, 0.38);
}
.myMail i {
font-style: normal;
background: #1c90f3;
color: white;
padding: 2px 5px 5px 5px;
margin-right: 3px;
}
.myMail:hover i {background: forestgreen;}
position: absolute;
padding: 5px;
background: #344149;
color: #fff;
margin: 10px 0px 0px 10px;
border: 1px solid #000;
border-radius: 2px;
}
div#all-mail:after, div#all-mail:before {
bottom: 100%;
left: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
div#all-mail:after {
border-color: rgba(52, 65, 73, 0);
border-bottom-color: #344149;
border-width: 8px;
margin-left: -8px;
}
div#all-mail:before {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 9px;
margin-left: -9px;
}
.myMail {
cursor: pointer;
padding: 2px 10px 5px 0px;
margin-top: 5px;
font-size: 12px;
font-family: sans-serif;
}
.myMail:hover {
background: rgba(0, 0, 0, 0.38);
}
.myMail i {
font-style: normal;
background: #1c90f3;
color: white;
padding: 2px 5px 5px 5px;
margin-right: 3px;
}
.myMail:hover i {background: forestgreen;}
Проблемы с модом? И так если у вас вдруг не работает мод, или выскакивает какая нибудь ошибка, мы попробуем Вам помочь тут Обратная связь
Пожаловаться
Нашли ошибку? Или хотите пожаловаться?
Нашли ошибку? Или хотите пожаловаться?
Популярные шаблоны
Больше шаблонов
Комментариев 0
Информация о материале
- Опубликовано Воскресенье, 10:59
- Категория Скрипты
- Просмотры 369
- Источник
Не указан
Навигация на сайте
Мини-чат
Последние комментарии
Опрос по сайту
Статистика Сайта
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня нас посетило
1