Как дать фокус () после оповещения ()? - PullRequest
Новая
       11

Как дать фокус () после оповещения ()?

9 голосов
/ 29 августа 2011

У меня есть что-то вроде: 

<input type="textbox" id="partNumber" onChange="validatePart(this);">
<input type="textbox" id="quantity" onfocus="saveOldQuantity(this);">

Событие onChange срабатывает правильно после внесения изменений и , текстовое поле теряет фокус. Когда quantity получает фокус, событие onfocus запускается правильно, чтобы сохранить старое значение quantity до внесения изменений.

Если validatePart() обнаруживает недопустимое значение partNumber, это alert указывает пользователю на этот факт. После очистки alert() я бы хотел вернуть фокус на вход partNumber. Но выполнение focus() на входном узле не дает ему фокус. Отладка здесь сложна, потому что взаимодействие с окном отладки IE, конечно, меняет фокус.

Как я могу убедиться, что фокус возвращается к partNumber, если в validatePart() обнаружена ошибка?

EDIT: Простая версия validatePart(): 

function validatePart(node) {
    if (!node.value) {
        alert('Please enter a part number.');
        node.focus();   // <======= why isn't this having any effect??
    }
}

Ответы [ 2 ]

19 голосов
/ 29 августа 2011

Добавление небольшого тайм-аута и возврат фокуса обратно в текстовое поле partNumber должно помочь.

Таким образом, ваша функция validatePart() становится примерно такой: 

function validatePart(node) {
    if (!node.value) {
        alert('Please enter a part number.');
        setTimeout(function(){node.focus();}, 1);
    }
}

Вот быстрый «живой» пример , который просто запускает alert независимо от того, что введено в текстовое поле partNumber, и успешно возвращает фокус обратно в текстовое поле partNumber (даже если вы переключаете его на quantity текстовое поле.

2 голосов
/ 29 августа 2011

Ваш код работает, как и ожидалось.Смотрите это скрипка .Вы видите какое-то другое поведение?Я вижу, что я набираю число в textbox1.Затем, когда я переключаюсь на textbox2, я получаю ошибку Invalid Part!, и фокус остается на текущем текстовом поле.

Обновлено - поскольку в Chrome это только кажется хорошим, вы можете отслеживать, существует ли ошибка.Если это так, то справьтесь с этим. 

var error = null;
function checkForErrors() { 
   if (error) { error.focus(); error = null; }            
}

function validatePart(node) {
   if (badpart) { error = node; }
}

function saveOldQuantity(node) {
   checkForErrors();
}
...