Question

当表单元素DOM属性设置为与同一元素属性的当前状态冲突时，我注意到浏览器与不同类型的表单元素之间的行为存在差异。

document.forms['foo'].bar.checked=false;
document.forms['foo'].bar.setAttribute("checked", "true");

document.forms['foo'].baz.value = 'prop value';
document.forms['foo'].baz.setAttribute("value", "attr value");

在IE 9中：属性获取文本输入和复选框（显示“道具值”和未选中）

在Chrome中：属性胜过文本输入属性（显示“prop value”）但是选中复选框。

为什么文字输入和复选框之间存在差异，为什么只有Chrome的区别？

应该是什么优先事项？如果您更改了DOM属性，那么该应该是否应该覆盖当前的表单输入状态？

Answer 1

看看http://jsfiddle.net/Ldf2s/9/。

<form name="foo">
    <input name="bar" type="checkbox" />
    <input name="baz" type="text"/>
</form>

<script>
setTimeout(function() {
    document.forms['foo'].bar.setAttribute("checked", "true");
}, 5000);

setTimeout(function() {
    document.forms['foo'].baz.setAttribute("value", "attr value");
}, 5000);
</script>

如果您运行页面并且未触摸输入框，则在5秒后将勾选复选框并设置值。但是，如果您运行该页面并立即单击该复选框并在文本输入中键入一些文本，则在5秒后不会修改这些值。

这里要理解的概念是脏检查标志和脏值标志。

这样做是为了标记复选框和文本输入字段，以确定document.forms['foo'].bar.setAttribute("checked", "true");和document.forms['foo'].baz.setAttribute("value", "attr value");是否会影响相应输入的检查和值。

对于脏检查标志，the HTML5 spec says

每个输入元素都有一个检查，由检查的IDL属性公开。

每个输入元素都有一个布尔脏检查标志。当它为真时，该元素被称为脏检查。创建元素时，脏检查标志必须初始设置为false，并且只要用户以更改检查的方式与控件交互，就必须将其设置为true。

checked内容属性是一个布尔属性，它提供输入元素的默认选中性。添加checked内容属性后，如果控件没有脏检查，则用户代理必须将元素的选中性设置为true;当删除checked内容属性时，如果控件没有脏检查，则用户代理必须将元素的选中性设置为false。

因此，在上面的JSFiddle中，用户单击该复选框的操作会停止setAttribute调用，从而影响是否选中该复选框。

然而，它也说

选中的IDL属性允许脚本操纵输入元素的检查。在获取时，它必须返回元素的当前检查;并且设置时，必须将元素的格式设置为新值，将元素的脏格式标记设置为true 。

所以document.forms['foo'].bar.checked=false;也应该具有停止setAttribute调用来设置检查状态的效果，因为它也应该使脏检查标志为真。

但在Chrome中，已检查的值已更改，因此与HTML5规范不一致。

HTML5规范对文本输入值也有类似要求，因为有一个脏值标志，当用户更改值时设置为true，或者以编程方式设置value属性。

在这种情况下，Chrome似乎行为正确，可能是因为在描述脏值标志时显式地设置了以编程方式设置value属性时设置脏值标志的要求，而脏检查标志的等效描述没有有匹配的评论。该要求仅在上面的引文中单独给出。

Answer 2

浏览器不同，部分原因是对于所涉及的DOM功能没有确切的，基于共识的定义。在HTML5中，这是标准化的：input element被定义为checked属性（“IDL属性”，因为它们称之为）描述了实际的检查状态（受用户操作和JavaScript代码），而defaultChecked属性对应于HTML属性checked，它设置初始检查。

在问题的示例代码中，checked属性设置为值false，它不会更改任何内容（在没有{{1}的情况下，它是初始值}属性）。然后设置checked属性，从而设置checked属性，但这不会更改检查状态。

因此，HTML不适用于HTML5草案。这在形式上只是一个特征，因为到目前为止还没有批准的规范，但实际上，它可以被描述为一个bug。

对于文本输入框defaultChecked，没有此类问题，因为input type=text属性更直接反映了value属性（没有单独的value属性）。

HTML表单元素属性和属性冲突时的优先级

2 个答案: