昨天关于Firefox和IE的兼容性谈了点自己的体会,不过既然现实是这样,那就研究一下吧。昨天晚上又遇到了Firefox和IE的问题。
开始我想动态创建一个文本框,然后提交数据,最简单的方法当然是
- <table>
- <form action="test.php">
- <tr><td>
- <div id="div1"></div>
- <input type="submit" value="Submit"/>
- <input type="button" value="Add" onclick="add();"/>
- </td></tr>
- </form>
- </table>
- <script type="text/javascript">
- function add()
- {
- document.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML +
- "<span><br/><input type=text name=option[]/>" +
- "<input type=button value=Delete onclick=/"Delete(this);/"/></span>";
- }
- function Delete(obj)
- {
- obj.parentNode.innerHTML = "";
- }
- </script>
以上是样例,在IE下工作得非常正常,但是在Firefox下就出现了很多问题。我把它列出来,供大家参考,以免以后遇到类似的问题
- 第13行这种写法,会造成在Firefox下不能保存用户输入的数据。也就是说,如果用户输入了内容,点Add追加下一行的时候,用户输入的数据会被清空。
- 于是我把代码改成这样
- <script type="text/javascript">
- function add()
- {
- try{
- var obj = document.getElementById("div1");
- var node = document.createElement("span");
- node.appendChild(document.createElement("br"));
- var text = document.createElement("input");
- text.name="option[]";
- text.type = "text";
- node.appendChild(text);
- var dnode = document.createElement("input");
- dnode.name="option[]";
- dnode.value="Delete";
- dnode.type = "button";
- dnode.onclick = function(evt) { Delete(this); };
- node.appendChild(dnode);
- obj.appendChild(node);
- } catch(e)
- {
- alert(e);
- }
- }
这次能在Firefox和IE下正常工作了,但是问题又来了,在Firefox里点击提交之后,发现新创建的文本框内容没有出现在$_POST里。而IE下是正常的。这次肯定不是javascript的问题了,到底什么地方出问题了,百思不得其解,最后只能求助google.功夫不负有心人,终于在一个论坛上看到了答案,就是<form></form>标签不能嵌入<table><></table>中,这是不规范的写法,造成了数据不能正常传递。关于标记是否规范的检查,有个很好的网站可以验证 http://validator.w3.org 经常做WEB开发的不妨验证一下网页的规范。
最后贴上在Firefox和IE下能正常工作的代码
- <form action="test.php">
- <table>
- <tr><td>
- <div id="div1"></div>
- <input type="submit" value="Submit"/>
- <input type="button" value="Add" onclick="add();"/>
- </td></tr>
- </table>
- </form>
- <script type="text/javascript">
- function add()
- {
- try{
- var obj = document.getElementById("div1");
- var node = document.createElement("span");
- node.appendChild(document.createElement("br"));
- var text = document.createElement("input");
- text.name="option[]";
- text.type = "text";
- node.appendChild(text);
- var dnode = document.createElement("input");
- dnode.name="option[]";
- dnode.value="Delete";
- dnode.type = "button";
- dnode.onclick = function(evt) { Delete(this); };
- node.appendChild(dnode);
- obj.appendChild(node);
- } catch(e)
- {
- alert(e);
- }
- }
- function Delete(obj)
- {
- obj.parentNode.innerHTML = "";
- }
- </script>