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

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

6 голосов
/ 07 января 2011
  1. У меня есть <input type=text> с focusout обработчиком событий
  2. У меня есть <button> с обработчиком события клика

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

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

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

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

проблема

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

4 голосов
/ 07 января 2011

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

Демо: http://jsfiddle.net/Anp4b/4/

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

Как я могу предотвратить выполнение события 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>
0 голосов
/ 07 января 2011

Есть ли причина, по которой вы используете .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;});

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

...