JSFiddle - React, Tailwind, and code Playground
HTML
<p><b>Update 2014-02-11:</b> Microsoft has patched this with the latest round of Windows Updates.</p>
<br/>
<p>As reported on <a href="https://stackoverflow.com/questions/20654447/ie11-is-crashing-when-clearing-a-form-with-5-or-more-fields-using-jquery">StackOverflow</a> and on <a href="https://connect.microsoft.com/IE/feedback/details/811930/ie11-crash-when-clearing-multiple-input-fields-with-jquery#tabs">Microsoft Connect</a>, IE 11 will crash if you set the value of 5 or more input elements to the empty string via Javascript.</p>
<p>In particular, you need to fill the elements, clear the elements via Javascript, click in one, and perhaps begin re-entering data for the crash to occur.</p>
<p>While putting the set-to-empty-string into a setTimeout doesn't solve the issue, apparently (<a href="https://stackoverflow.com/questions/20654447/ie11-is-crashing-when-clearing-a-form-with-5-or-more-fields-using-jquery">as shown in the StackOverflow question</a>) a recursive-style setTimeout call seems to mitigate the crash.</p>
<p>There's some good discussion on <a href="https://news.ycombinator.com/item?id=7036706">Hacker News</a>.</p>
<p class="note">Hello HTML5 Weekly Readers! Some time after this was posted, a <a href="https://connect.microsoft.com/IE/feedback/details/808033/ie11-two-reproducible-crashes-on-assigning-the-value-of-an-input-element-with-javascript">work-around was found</a> involving setting the input fields to a space and then to blank. A lot easier than the recursive timeout solution! This also works if you hook into an onreset event if necessary. I hope that is helpful! Feel free to ping me (@dahjelle) if you want more gory details.</p>
<button id="clearFormNormal">clear form normal (crash IE11)</button>
<button id="clearFormSetTimeout2">clear form with a setTimeout, simple loop (crash IE11)</button>
<button id="clearFormSetTimeout">clear form with a recursive setTimeout (works in IE11)</button>
<form>
<label>1</label>
<input type="text" />
...
CSS
* {
font-family: Helvetica Neue Light, Helvetica, san-serif;
font-size: 16px;
line-height: 26px;
}
body {
margin: 20px;
}
button, input {
display: block;
}
.note {
border: 2px solid red;
background: yellow;
border-radius: 5px;
padding: 10px;
}
JavaScript
var clearValue = "";
document.getElementById("clearFormNormal").onclick = function () {
var fields = Array.prototype.slice.call(document.querySelectorAll("input")); // slice to get Array from NodeList
fields.forEach(function (field) {
field.value = clearValue;
});
};
document.getElementById("clearFormSetTimeout").onclick = function () {
var fields = Array.prototype.slice.call(document.querySelectorAll("input")); // slice to get Array from NodeList
var clearThem = function (counter) {
counter = counter || 0;
if (fields.length === counter) {
return;
}
setTimeout(function () {
fields[counter].value = clearValue;
clearThem(counter + 1);
}, 0);
};
clearThem();
};
document.getElementById("clearFormSetTimeout2").onclick = function () {
var fields = Array.prototype.slice.call(document.querySelectorAll("input")); // slice to get Array from NodeList
fields.forEach(function (field) {
setTimeout(function () {
field.value = clearValue;
}, 0);
});
};