jQuery как остановить.событие blur() при нажатии кнопки "Отправить"
Я создаю небольшую целевую страницу с простой демонстрационной формой регистрации электронной почты. Я хочу, чтобы поле формы открывалось при фокусировке, а затем сжималось обратно на размытие.
однако проблема, с которой я сталкиваюсь, заключается в том, что при нажатии кнопки отправки это вызывает функцию размытия, скрывая кнопку и сокращая форму. Мне нужно найти способ остановить .метод blur() только тогда, когда пользователь нажимает, чтобы сосредоточиться на кнопке отправки. Есть ли хороший обходной путь для это?
признателен за любую помощь я могу получить!
4 ответов
Это не красивое решение, но оно работает. Попробуйте это:
$("#submitbtn").mousedown(function() {
mousedownHappened = true;
});
$("#email").blur(function() {
if (mousedownHappened) // cancel the blur event
{
mousedownHappened = false;
}
else // blur event is okay
{
$("#email").animate({
opacity: 0.75,
width: '-=240px'
}, 500, function() {
});
// hide submit button
$("#submitbtn").fadeOut(400);
}
});
Я знаю, этот вопрос старый, но самый простой способ сделать это, чтобы проверить события.relatedTarget. Первая часть оператора if должна предотвратить выдачу ошибки, если relatedTarget равен null (если будет короткое замыкание, потому что null эквивалентно false, и браузер знает, что ему не нужно проверять второе условие, если первое условие ложно в && оператор).
Так:
if(event.relatedTarget && event.relatedTarget.type!="submit"){
//do your animation
}
почему бы не положиться на submit
событие вместо click
? http://jsbin.com/ehujup/5/edit
просто пара изменений в html и js
обернуть входы в form
и добавить required
для электронной почты, как это, очевидно, должно быть
<form id="form">
<div id="signup">
<input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required">
<input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
</div>
</form>
в js удалите обработчик, который слушает #submitbtn
$("#submitbtn").on("click", function(e){
e.stopImmediatePropagation();
$("#signup").fadeOut(220);
});
и использовать вместо отправки формы listerer
$("#form").on("submit", function(e){
$("#signup").fadeOut(220);
return false;
});
вы можете использовать $.ajax()
чтобы сделать его еще лучше.
делая это вы получаете точку с точки зрения проверки и HTML5 валидатор родного браузера сделает проверить формат электронной почты, где он поддерживается.