Событие jQuery Stop.blur() при нажатии кнопки "отправить"

Я создаю небольшую целевую страницу с простой формой регистрации электронной почты. Я хочу, чтобы поле формы открывалось, когда фокусировалось, а затем сжималось при размытии.

Однако проблема, с которой я сталкиваюсь, - это когда вы нажимаете кнопку отправки, это вызывает функцию размытия, скрывая кнопку и уменьшая форму. Мне нужно найти способ остановить метод .blur() только тогда, когда пользователь нажимает кнопку фокусировки на кнопку отправки. Есть ли хорошие способы решения этой проблемы?

Поблагодарите любую помощь, которую я могу получить!

Ответ 1

Это не самое приятное решение, но оно действительно работает. Попробуйте следующее:

$("#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);
    }
});

ДЕМО ЗДЕСЬ

Ответ 2

Я знаю, что этот вопрос старый, но самый простой способ сделать это - проверить event.relatedTarget. Первая часть оператора if состоит в том, чтобы предотвратить выброс ошибки, если связанныйTarget имеет значение null (IF будет коротким, поскольку null эквивалентен false, и браузер знает, что ему не нужно проверять второе условие, если первое условие является ложным в выражении && > ).

Итак:

if(event.relatedTarget && event.relatedTarget.type!="submit"){
     //do your animation 
}

Ответ 3

Попробуйте это внутри обработчика .blur:

if ($(':focus').is('#submitbtn')) { return false; }

Ответ 4

почему бы не полагаться на 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="[email protected]" 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 собственного браузера будет проверять формат электронной почты, где он поддерживается.