IE11 is crashing when clearing a form with 5 or more fields using JQuery $(…).val(“”)

问题

If I'm clearing a form with 5 or more fields in IE11 using $('form input').val("") IE11 will crash. 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("");
    });
});

When I'm doing this recursive and with a setTimeout it works.

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();
    });
});

See the http://jsfiddle.net/fransoverbeek/Cy5D5/7/ as well

Is this an IE11 bug?

回答1:

I believe that this is an IE bug and I have created the following connect bug report: https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields-with-jquery

I have added a slightly modified version of your recursive function there as a work around. The function is slightly more generic and looks like this:

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"));
    });
});

Please up-vote the connect issue.

How the clearFields function works:

First, note that I did not write the original function this was based off of, so the why of it working is only conjecture on my part.

The clearFields function is a recursive function. Each time it runs, it takes two parameters: counter (which is the index in the set of fields to be cleared) and selector (the jquery object that contains the set of fields to be cleared)

The function creates looks at the element specified by counter in the set of DOM elements specified by selector. If such an element exists, then it creates an asynchronous setTimeout which will clear that element. This async function then increments counter (which is called i here) and recursively calls clearFields. I believe that the recursiveness is key because I tried using just a setTimeout in a loop and it didn't work.

The recursion stops when counter goes past the index of the last element in the collection which is when selector.eq(counter).length !== 1

I think this function could further be improved by swapping the order of counter and selector parameters so that counter would be optional for the first call.

I have never needed to use the jQuery deferred code before, so I don't know what role that plays in this function.

回答2:

I believe it is a bug of IE and it is not related to jQuery, as you can simply show it by the following html page like:

<!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>

One can find that IE 11 will crash after you reset the form.

回答3:

try

 $(':input',"#" + form.id)
  .not(':button, :submit, :reset, :hidden')
  .val('');

$("#" + form.id)[0].reset();

check this Clearing file input box in Internet Explorer

回答4:

The fix for this bug was included in the IE updates for February 2014 released today on Windows Update.

回答5:

I think this is a bug in Internet Explorer 11. I reported a similar bug on Microsoft Connect. I was able to reproduce the issues I encountered both with and without jQuery.

On the bug report, there is a very simple (and quite surprising) workaround (discovered by philbee21). Before assigning the empty string, first set the value to a single space:

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

I have created an updated fiddle.

回答6:

This appears to fix the issue:

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

I am not sure why, but my theory is that setting the field value to it's current value resets a reference that was null.

Check out the JS Fiddle here: http://jsfiddle.net/Cy5D5/22/

来源：https://stackoverflow.com/questions/20654447/ie11-is-crashing-when-clearing-a-form-with-5-or-more-fields-using-jquery

标签

javascript

jquery

html

internet-explorer-11