IE11在使用JQuery$(..）.val(“”）清除具有5个或更多字段的表单时崩溃

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

本文关键字：5个 字段 崩溃 表单 清除 JQuery val IE11      更新时间：2023-09-26

如果我使用$（'form input'）清除IE11中有5个或更多字段的表单。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漏洞吗？

我认为这是一个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元素集中创建由counter指定的元素的外观。如果存在这样的元素，那么它会创建一个异步setTimeout，它将清除该元素。这个异步函数然后递增计数器（这里称为i）并递归地调用clearFields。我相信递归性是关键，因为我尝试在循环中只使用setTimeout，但没有成功。

当counter超过集合中最后一个元素的索引时，即selector.eq（counter）.length！==时，递归停止1

我认为这个函数可以通过交换计数器和选择器参数的顺序来进一步改进，以便计数器在第一次调用时是可选的。

我以前从未需要使用jQuery延迟代码，所以我不知道它在这个函数中扮演什么角色。

我认为这是IE的一个bug，它与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将在您重置表单后崩溃。

尝试

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

或

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

检查这个正在清除Internet Explorer 中的文件输入框

今天在Windows Update上发布的2014年2月IE更新中包含了此错误的修复程序。

我认为这是InternetExplorer11中的一个错误。我在Microsoft Connect上报告了一个类似的错误。我能够重现我在使用jQuery和不使用jQuery时遇到的问题。

在错误报告中，有一个非常简单（也非常令人惊讶）的解决方法（由philbee21发现）。在分配空字符串之前，首先将值设置为一个空格：

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

我已经创建了一个更新的小提琴。

这似乎解决了问题：

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

我不知道为什么，但我的理论是，将字段值设置为当前值会重置为null的引用。

点击此处查看JS Fiddle：http://jsfiddle.net/Cy5D5/22/

相关文章：