Google Chrome, бесконечные циклы и выделение текста

Question

Этот вопрос имеет немного фона.Пожалуйста, посмотрите два других вопроса, которые я недавно опубликовал и которые касаются:

Как выбрать текст в кросс-браузерном текстовом поле Бесконечные циклы, созданные в Google Chrome

Слово предупреждения: Возможно, вторая ссылка - красная сельдь.

Хорошо, моя проблема в том, чточто я пытаюсь сделать так, чтобы, когда пользователь впервые щелкает или вкладывает текстовое поле, весь текст должен быть выделен.Если текстовое поле имеет фокус, последующие щелчки по тексту внутри текстового поля должны вести себя нормально (т.е. не перевыбирать весь текст).Ответ, который я выбрал в первой ссылке выше, - это тот, который я нашел работающим во всех браузерах.Для вашего удобства ниже приведен код:

$('input[type="text"]').live('focus', function (event) {
    var inp = this;
    setTimeout(function () {
        inp.select();
    }, 1);

    event.stopPropagation();
    event.preventDefault();
    return false;    
});

Теперь моя вторая ссылка выше - это то, к чему я, похоже, прибегаю с этим подходом.Кажется, что периодически Google Chrome застревает где-то и начинает очень быстро менять фокус между текстовыми полями.Вы можете увидеть, что, как мне кажется, происходит здесь: http://jsfiddle.net/ajbeaven/XppG9/14/

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

Спасибо всем, кто может пролить свет!

Answer 1

Поместите любую дополнительную работу в функцию setTimeout. И добавьте clearTimeout() перед вами setTimeout():

var focusTimeout = 0;
$('input[type="text"]').live('focus', function(event) {
    var inp = this;
    clearTimeout(focusTimeout);
    focusTimeout = setTimeout(function() {
        $('#message-container').html($('#message-container').html() + "*\u200b");
        inp.select();
    }, 1);
});

http://jsfiddle.net/XppG9/19/

В Chrome запись html на страницу (очевидно) приводит к тому, что поле теряет фокус, а select() приводит к тому, что оно получает фокус через 1 мс позже, вызывая событие фокуса и вызывая бесконечный цикл. Перемещение вызова html write в функцию, которая выделяет текст, похоже, помогает.

Answer 2

О, чувак, я только что понял это.Эта ошибка, вероятно, не случится с вами на реальном сайте.Это происходит потому, что вы обновляете DOM, добавляя «*» к сообщению div.Когда вы делаете это, он толкает содержимое страницы вниз.Это перемещает верхнее текстовое поле туда, где находится мышь, и событие mouseup инициируется в верхнем текстовом поле, в результате чего оба текстовых поля запускают setTimeout и попадают в бесконечный цикл.Общее количество сообщений об этом.

edit: это, вероятно, не событие mouseup.Похоже, Chrome думает, что вы правомерно сосредоточены на обоих.Вот пример теста ошибки для Chrome: http://jsfiddle.net/delvarworld/AnBE8/

edit2: это происходит и в Safari.Скорее всего, проблема с webkit.

tldr Простой обходной путь - не обновлять dom способом, который вызывает перекомпоновку события focus, как при избавлении от строки html ()

.также попробуйте:

$('input[type="text"]').live('mouseup', function (event) {

, который работает в Chrome для меня