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

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

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

признателен за любую помощь я могу получить!

13
blur event-handling focus jquery

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);
    }
});​

ДЕМО ЗДЕСЬ

10

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

Так:

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

попробуйте это внутри .обработчик размытия:

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

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

1