Проблема DOM с щелчком, инициирующим событие фокуса на другом входе

  1. у меня есть <input type=text> с focusout обработчик события
  2. у меня есть <button> с обработчиком события click

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

window.setTimout(function() { $(this).focus(); }, 10);

так как я не могу переориентироваться в focusout обработчик события. focusout событие не может быть отменено. Просто к вашему сведению.

Click собирает данные из элементов ввода и отправляет их с помощью Ajax.

Эта проблема

Когда пользователь нажимает клавишу TAB через форму, все в порядке. Когда определенное поле ввода не проходит проверку форматирования, оно перефокусируется сразу после нажатия пользователем клавиши TAB.

Но когда пользователь не использует TAB, а вместо этого нажимает на каждое отдельное поле ввода, все работает нормально, пока они не нажмут button, focusout срабатывает и устанавливает тайм-аут для перефокусировки. Поскольку время ожидания очень короткое, фокусировка происходит потом, а затем click событие запускается и выдает запрос Ajax.

Вопрос

Я реализовал проверку форматирования как независимый плагин jQuery, который я хочу сохранить таким же образом. Оно использует .live() приложить focusout во всех полях ввода с определенным атрибутом, где задано регулярное выражение формата.

Представление данных также является общим, и я не хочу, чтобы это зависело от плагина форматирования. Они оба должны оставаться независимыми.

Как я могу предотвратить выполнение события click без зависимости этих двух плагинов?

Пример кода, с которым я возлюсь

После некоторых поисков я увидел, что все основные браузеры поддерживают document.activeElement но я не могу заставить его работать в Chrome. FF и IE оба сообщают this будучи активным элементом, но Chrome всегда говорит, что это BODY это активно, хотя click выстрелил в button элемент.

Проверьте этот код http://jsfiddle.net/Anp4b/1/ и нажмите на кнопку. Протестируйте с Chrome и другим браузером и увидите разницу.

Источник

2 ответа

Решение

Вы могли бы использовать флаг...

Живая демоверсия: http://jsfiddle.net/Anp4b/4/

Итак, ваш вопрос:

Как я могу предотвратить выполнение события click без зависимости этих двух плагинов?

Ну, вы, очевидно, не можете предотвратить событие click. Если пользователь хочет нажать на кнопку, он сделает это, и событие нажатия активируется. Вы ничего не можете с этим поделать.

Таким образом, ответ на поставленный выше вопрос: вы не можете.

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

Код JS:

$("#Name").focusout(function(){    
    var that = this;    
    valid = this.value.length ? true : false;    
    !valid && window.setTimeout(function() {
        $(that).focus();
    }, 0);            
});


$("#Confirm").click(function(e) {    
    if ( !valid ) { return false; }    
    e.preventDefault();    
    alert('AJAX-TIME :)');    
 });

HTML-код:

<input type="text" id="Name">
<button id="Confirm">OK</button>
Источник

Есть ли причина, по которой вы используете .focusout вместо .blur?

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

Еще одно решение, которое, мы надеемся, даст результат, который вы ищете.

1) Создайте именованный обработчик кликов:

var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);

2) Добавьте следующее к событию focusout, когда оно не проходит проверку:

$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});

Вы можете найти пример этого здесь.

Источник
Другие вопросы по тегам