Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Firefox 刷新不能重置表单

  表单应该是属于页面的东西,当页面刷新后表单元素重新创建,其初始值也应该重新被赋予。但是在 Firefox 中,即使页面刷新,表单的值也依然停留在它上一次编辑的状态,除非这个表单控件是动态生成的。这导致了基于初始值判断的一些程序出问题。
  下面这个代码中的输入框内文字在 Firefox 上是递增上去的,因为刷新后输入框依然保持上一次的结果。而 Chrome 上的值则总是 2 <input value="1" />
<script>
var input = document.querySelector('input');
console.log(input.value);
input.value++;
setTimeout(() => location.reload(), 500);
</script>
  如果控件是手动创建的就不会有这个问题 <body>
<script>
var input = document.createElement('input');
document.body.appendChild(input);
input.value++;
setTimeout(() => location.reload(), 500);
</script>
  但是如果是用 document.write 创建就依然存在这个问题 <script>
document.write('<input/>');
var input = document.querySelector('input');
input.value++;
setTimeout(() => location.reload(), 500);
</script>
  另一个很奇怪的实验是,Firefox 如何定义一个控件是原来的控件的呢?它不是通过 ID,也不依赖 DOM 层级,只有 name 可以让 Firefox 区分它们 <style> span input { color: red; } </style>
<script>
// 随机 DOM 位置
var I1 = `<input/>`;
while(Math.random() < .5) I1 = `<span>${I1}</span>`;
// 随机 id
var I2 = `<input id="${Math.random()}" />`;
// 随机 name
var I3 = `<input name="${Math.random()}" />`;
document.write(I1 + I2 + I3);
var list = document.querySelectorAll('input');
list[0].value++;
list[1].value = +list[1].value + 100;
list[2].value = +list[2].value + 10000;
setTimeout(() => location.reload(), 100);
</script>
  这个代码中只有 I3 是不会递增,因为它有随机的 name,每次都被认为是不同控件。而前面的 I1 每次被包裹不同层级到 SPAN 元素(修改其在 DOM 树中的位置),I2 每次产生一个随机 id。但它们依然会被认为是相同的元素。甚至把 I1 和 I2 的位置对调 Firefox 也无法区分。也就是说对于没有 name 的元素,Firefox 只会考虑它们在文档中出现的次序,而不在乎它们具体出现在什么位置。
  记得以前 IE 也有过类似的设定,但我觉得这个设定也许在浏览器不支持 JavaScript 的时代比较有用。如今的 Web 发展到全都依赖 JS 来跑了,这个设定是不是应该去掉了呢?

  测试于:Firefox 41 @ OS X Yosemite 10.10
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^