Проблемы с использованием события onBlur - PullRequest
Новая
       40

Проблемы с использованием события onBlur

2 голосов
/ 15 ноября 2011

Я осмотрел stackoverflow на тему onblur, но до сих пор не смог найти подход для решения того, что я хочу сделать.

У меня есть простые таблицы с двумя столбцами,неизвестное количество строк.Строки создаются во время рендеринга в зависимости от количества отправляемых коробок.Каждый столбец имеет следующие имя и идентификатор для поля ввода:

Для столбца 1: shipItems [ rowNum ] .barcode Для столбца 2: shipItems [ rowNum ].код отслеживания

Довольно прямо.То, что я хочу сделать, это проверить код отслеживания и, в случае ошибки, предупредить пользователя и переместить курсор на столбец / строку, которая вызвала проблему.Пользователи будут использовать сканер для сканирования информации.

Все работает, за исключением того, что я не могу заставить курсор вернуться к столбцу / входу, который вызвал проблему в событии onBlur.

Насколько я понимаю, когда происходит событие onBlur, элемент теряет фокус и, следовательно, фокус переносится на новый / следующий элемент.

Я пытался поиграться с событием onfocus, событиями onkeypress, новсе еще не увенчались успехом.

Я открыт любому идеалу, чтобы добиться этого, я потратил много времени на то, как оно есть.JQuery не исключает вопросов или просто планирует старый javascript.

ОБНОВЛЕНИЕ

Вот ссылка на скрипт на jsFiddle :

Ответы [ 2 ]

3 голосов
/ 15 ноября 2011

После просмотра вашего кода я могу сказать, что вы столкнулись с необычной ошибкой в ​​jQuery.Я видел некоторые странные вещи, происходящие при использовании focus() (например, необходимость использовать setTimeout).Но в вашем случае $(this) как-то не решается правильно при вызове focus().

Сначала я подумал, что это потому, что id не соответствует стандартам HTML-4, но исправление id не помогло.$(this) все еще не смог сфокусироваться, несмотря на то, что он правильно ссылается на элемент <input>.Затем я попытался идентифицировать идентификатор с помощью jQuery как строку $("'#" + thisId + "'") ... все еще не работало.Но жестко закодированный id сработал ...

Итак, вот как Я изменил ваш код и обошел проблему, чтобы сфокусировать его 

if( null === $text.match(/\b(1Z ?[0-9A-Z]{3} ?[0-9A-Z]{3} ?[0-9A-Z]{2} ?[0-9A-Z]{4} ?[0-9A-Z]{3} ?[0-9A-Z]|[\dT]\d\d\d ?\d\d\d\d ?\d\d\d)\b/))
{
    alert("No Match");    
    //$(this).focus();//don't use jquery $this
    var thisId = $(this).attr('id');//get the id
    //use the setTimeout workaround for firefox
    setTimeout(function() {
      document.getElementById(thisId).focus();//use javascript to set focus
    },0);
    $(this).css('background-color','Red');
}

Не стесняйтесь смотреть на скрипку (ссылка выше).Этот подход исправляет проблему фокуса.

0 голосов
/ 17 ноября 2011

Я разобрался в проблеме.Оказывается, что IE и FireFox ведут себя очень по-разному, когда дело касается onBlur.

Я вызывал focus () во время выполнения blur ().поскольку размытие не завершено, оно либо игнорирует команду фокусировки, либо выполняет, а затем завершает размытие.

В некоторых браузерах команда focus может вызывать размытие, что приводит к созданию бесконечного цикла с курсором, подпрыгивающим между двумя полями.

Использование тайм-аута заставит фокус сработать за пределамифункция обратного вызова blur.

В IE я могу использовать onBlur и не иметь проблем, в FF фокус никогда не вызывал событие с тайм-аутом, поэтому ему нужен onChange.

У меня естьобновил мой скрипт - он отлично работает на IE - http://jsfiddle.net/boyd4715/3wbtQ/34/

...