javascript - 自定义属性在 IE10 中不起作用

Question

我有一个输入文本类型

<input type="text" name="firstNameInd" style="width:200px;" required="true" maxlength="100" />

“必需”是我使用 javascript 访问的自定义属性。

这在 IE 7 和 8 中运行良好，但在 IE10 中却显示 required=""。

可能是因为 required 是 HTML5 中的一个属性。

任何人都可以建议该怎么做？

Answer 1

假设 HTML5 文档类型，该required属性是保留的。您应该使用data-自定义属性的前缀：

<input type="text" name="firstNameInd" style="width:200px;" data-required="true" maxlength="100" />

您可以像这样访问：

var required = foo.getAttribute('data-required') // where foo is reference to your input

Answer 2

如果我误解了您并且您想真正使用自定义属性，则不能使用 name required。

它在 HTML 5 标准中保留。您必须通过以下方式使用data-required和访问它dataset：

element.dataset.required
// or
element.getAttribute("data-required");

---

您必须指定required或不指定任何属性的值！

<input type="text" ... required="required" />
<input type="text" ... required />

该required属性按规范是一个布尔属性。

这些规则适用于布尔属性：

如果存在该属性，则其值必须是空字符串或与属性的规范名称匹配的不区分大小写的 ASCII 值，并且没有前导或尾随空格。

— http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

Answer 3

在 html5 中自定义属性以 data-* 开头你可以使用

<input type="text" name="firstNameInd" style="width:200px;" data-required="true" maxlength="100" />

然后访问它

getAttribute("data-required")

进一步阅读

http://html5doctor.com/html5-custom-data-attributes/

谢谢

Answer 4

required不是自定义属性；它是 HTML5 标准的一部分。并且true不是它的有效值。这可能是它不起作用的原因。

如果您需要自定义属性，正确的符合标准的方法是始终在它们前面加上data-. 这确保了以后对标准 HTML 属性集的任何添加都不会发生冲突。

在这种情况下，如果您想使用 HTML5required属性，它可以作为布尔属性工作，类似于disabledand readonly，因为您只需要指定属性名称而无需值即可应用它。符合标准的 HTML5 代码如下所示：

<input type="text" name="foo" required maxlength="100">

这会将required属性添加到 DOM 中的元素。true然后，您可以使用 Javascript 将其设置为或false（即布尔值，而不是字符串）来打开或关闭该属性。并且您可以通过简单地检查它是否设置来访问JS。

请注意，您的 JS 代码需要满足以下事实：在最近的 HTML5 兼容浏览器中，当您required设置了属性时，浏览器已经为您进行了一些验证；在现代浏览器中运行时，您可能需要删除一些现有代码，或者至少对其进行调整以处理所有情况。

如果你真的想要一个自定义属性，你会使用data-required="whatever"，但在这种情况下这是不必要的，除非你想要与requiredHTML5 标准有显着不同的行为。