javascript – IE不提交;动态添加表单元素;这是一个IE bug吗?

前端之家收集整理的这篇文章主要介绍了javascript – IE不提交;动态添加表单元素;这是一个IE bug吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我写了一些 Javascript以允许编辑HTML表单中的项目列表,包括添加删除项目.在Firefox中工作.在Internet Explorer中尝试时,我发现任何添加的项目都没有被提交到表单中.

漫长的故事短…许多简化,调试,弄清楚什么行触发IE忽略新的表单输入.所以行为问题解决了.

但现在我必须问:为什么?这是IE的bug吗?

以下是简化代码

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        function add() {
            div = document.getElementById("mylist");

            // *** Adding text here works perfectly fine. ***
            div.innerHTML += " ";

            e = document.createElement("input");
            e.setAttribute("type","text");
            e.setAttribute("name","field3");
            e.setAttribute("value","--NEWVALUE--");
            div.appendChild(e);

            // *** Adding text here works perfectly fine in Firefox,but for
            //     Internet Explorer it causes field3 to not be submitted. ***
            //div.innerHTML += " ";
        }
    </script>
</head>
<body>
    <form action="" method="get">
        <div id="mylist">
            <input type="text" name="field1" value="value1" />
            <input type="text" name="field2" value="value2" />
        </div>
        <a href="javascript:" onclick="add()" />Add</a>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

试试看,做明显的:在IE中加载,点击添加,点击提交,看看地址栏里面有什么.如果您取消注释add()中的最后一行,IE将突然停止报告字段3.它在Firefox中可以正常工作.

有任何想法吗?好奇心想知道. (如果需要,如何在便携式的方式添加文本,所以IE是快乐的?)

解决方法

Is this an IE bug?

似乎如此.创建< input>元素通过DOM方法,IE不会很好的拿起’name’属性.它是一种类型的,因为元素确实提交,但如果你试图获得一个’innerHTML’表示的元素,它神秘地消失.如果通过直接写入innerHTML创建元素,则不会发生这种情况.

另外,如果您使用DOM Level 0表单导航方法,如’myform.elements.x.value’,通过’elements’数组访问可能无效(类似地,直接’myform.x’访问某些人误导使用).在任何情况下,这些天你可能更喜欢getElementById().

所以要么使用innerHTML或者使用DOM方法;最好不要在创建表单域时混合它们.

这是documented (see ‘Remarks’),最后在IE8中修复.

无论如何,永远不要做:

div.innerHTML+= ‘…’;

这只是语法糖:

div.innerHTML= div.innerHTML+’…’;

换句话说,它必须对元素的整个子HTML元素进行序列化,然后进行字符串连接,然后将新的字符串重新解析回元素,抛弃所有原始内容.这意味着你会丢失任何无法序列化的东西:以及IE的虚拟半创建的“名称属性,这也意味着任何JavaScript事件处理程序,DOM侦听器或其他每个子元素附加的自定义属性.此外,不必要的序列/解析周期很慢.

原文链接:https://www.f2er.com/js/149878.html

猜你在找的JavaScript相关文章