IE11 сбой при очистке формы с 5 или более полями с использованием JQuery $(...). Val ("")

Если я очищаю форму с 5 или более полями в IE11, используя $('form input'). val ("") IE11 выйдет из строя. HTML:

<form>
    <label>1</label><input type="text"/>
    <label>2</label><input type="text"/>
    <label>3</label><input type="text"/>
    <label>4</label><input type="text"/>
    <label>5</label><input type="text"/>
</form>

JS:

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val("");
    });
});

Когда я делаю это рекурсивно, и с помощью setTimeout он работает.

JS:

function clearFields (counter) {
    var i = counter || 0, deferred = new $.Deferred();
    if ($("form input").eq(i).length === 1){
        setTimeout(function(){
            $("form input").eq(i).val("");
            i = i + 1;
            clearFields(i).always(function(){
                deferred.resolve();
            });
        },0);
    } else {
        deferred.resolve();
    }
    return deferred.promise();
}

$(document).ready(function(){
    $('#clearFormSetTimeout').click(function(){
        clearFields();
    });
});

Смотрите http://jsfiddle.net/fransoverbeek/Cy5D5/7/, а также

Является ли это ошибкой IE11?

Ответы

Ответ 1

Я считаю, что это ошибка IE, и я создал следующий отчет об ошибке подключения: https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields-with-jquery

Я добавил немного измененную версию вашей рекурсивной функции там, где вы работаете. Функция несколько более общая и выглядит следующим образом:

function clearFields (counter, selector) {
    var i = counter || 0, deferred = new $.Deferred();
    if (selector.eq(i).length === 1){
        setTimeout(function(){
            selector.eq(i).val("");
            i = i + 1;
            clearFields(i, selector).always(function(){
                deferred.resolve();
            });
        },0);
    } else {
        deferred.resolve();
    }
    return deferred.promise();
}

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val("");
    });
    $('#clearFormSetTimeout').click(function(){
        clearFields(0, $("form input"));
    });
});

Пожалуйста, проголосуйте за проблему подключения.

Как работает функция clearFields:

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

Функция clearFields является рекурсивной. Каждый раз, когда он выполняется, он принимает два параметра: счетчик (который является индексом в наборе полей, подлежащих очистке) и селектор (объект jquery, содержащий набор полей, подлежащих очистке)

Функция создает внешний вид элемента, указанного счетчиком, в наборе элементов DOM, заданных селектором. Если такой элемент существует, он создает асинхронный setTimeout, который очистит этот элемент. Эта асинхронная функция затем увеличивает счетчик (который называется здесь) и рекурсивно вызывает clearFields. Я считаю, что рекурсивность является ключевой, потому что я пытался использовать только setTimeout в цикле, и это не сработало.

Рекурсия останавливается, когда счетчик проходит мимо индекса последнего элемента в коллекции, который является когда selector.eq(counter).length! == 1

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

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

Ответ 2

Я считаю, что это ошибка IE, и она не связана с jQuery, поскольку вы можете просто показать ее на следующей странице html, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>    
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
    <title>test</title>
  </head>
  <body>
  <form id="form_1">
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="text" value="" size="10"/><br/>
  <input type="button" value="reset" onclick="document.getElementById('form_1').reset();">
  </form>.
  </body>
</html>

Можно обнаружить, что IE 11 сбой после вас reset формы.

Ответ 4

Исправление этой ошибки было включено в обновления IE за февраль 2014 года, выпущенные сегодня в Центре обновления Windows.

Ответ 5

Я думаю, что это ошибка в Internet Explorer 11. Я сообщил о подобной ошибке в Microsoft Connect. Я смог воспроизвести проблемы, с которыми столкнулся как с jQuery, так и без него.

В отчете об ошибке есть очень простой (и довольно удивительный) обходной путь (обнаруженный philbee21). Перед назначением пустой строки сначала установите значение в одно пространство:

fields.forEach(function (field) {
    field.value = ' ';
    field.value = clearValue;
});

Я создал обновленную скрипту .

Ответ 6

Это исправление проблемы:

$(document).ready(function(){
    $('#clearFormNormal').click(function(){
        $("form input").val($("form input").val());
        $("form input").val("");
    });
});

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

Ознакомьтесь с JS Fiddle здесь: http://jsfiddle.net/Cy5D5/22/