Firefox 重新排列表单输入属性的顺序答案

【问题标题】：Firefox rearranges the order of form input attributesFirefox 重新排列表单输入属性的顺序
【发布时间】：2016-03-01 21:25:54
【问题描述】：

有谁知道这件事，以及如何预防。

我通过 AJAX 使用 php 文件中的表单填充 div。输入元素在php中的写法如下

echo ('<input type="text" name="court_type_name" id="court_type_name_input-' . $itemID . '" class="dataField" data-rule-length="4,6" data-rule-required="true" />');

我根据属性的顺序进行表单验证。后面的属性具有更高的优先级。例如，这种情况下“必需”的优先级高于 Lenght-In-Between

在 Chrome Inspect 中，我看到以下内容。这是我最初编写的方式，并且代码按预期工作。

<input type="text" name="court_type_name" id="court_type_name_input-9" class="dataField" data-rule-length="4,6" data-rule-required="true">

但是在 Firefox 检查中，我看到以下内容。请注意，属性的顺序已更改。这会导致“data-rule-length”优先于“data-rule-required”。

FF Inspect 的截图：

除此之外。还有更多的不一致。

如果我直接从检查窗口复制/粘贴，我会得到一个完全不同的属性顺序。与我的原版不同，也与 FF Inspect 中的视觉效果不同。然而，代码的工作方式与视觉表示一致。

<input name="court_type_name" id="court_type_name_input-9" class="dataField" data-rule-length="4,6" data-rule-required="true" type="text">

【问题讨论】：

标签： html ajax firefox

【解决方案1】：

根据定义，属性是无序的。您不能依赖它们出现的顺序。您必须以其他方式对该信息进行编码。例如另一个数据属性。

data-rules="length required" data-rule-length="4,6" data-rule-required="true"

【讨论】：

【解决方案2】：

据我所知，它无法关闭。 FF就是这样显示的。
如果您右键单击并选择Edit as HTML，它应该会显示原始订单。
属性的顺序不应该影响结果，但同样，它只是以重新排序的方式显示。

【讨论】：