Question

如何检查浏览器是否支持form元素上的HTML5 input属性？

关注this question后，我尝试了以下内容：

var supportForm = function()
{
  var input = document.createElement("input");
  if ("form" in input)
  {
    input.setAttribute("form", "12345");

    if (input.form == "12345")
      return true;
  }

  return false;
}

...但是这给FireFox带来了假阴性（至少14）。用input.form替换input.getAttribute("form")会给IE 9带来误报。

Answer 1

对于输入元素，在HTML5表单引用功能之前有一个对父表单的引用，这会引起您提到的这个问题。

我希望有更优雅的方法来检查它是否受支持但是现在你可以使用以下内容（但它涉及与DOM的交易）：

function testInputFormSupport() {
    var input = document.createElement('input'),
         form = document.createElement('form'),
         formId = 'test-input-form-reference-support';
    // Id of the remote form
    form.id = formId;
    // Add form and input to DOM
    document.childNodes[0].appendChild(form);
    document.childNodes[0].appendChild(input);
    // Add reference of form to input
    input.setAttribute('form', formId);
    // Check if reference exists
    var res = !(input.form == null);
    // Remove elements
    document.childNodes[0].removeChild(form);
    document.childNodes[0].removeChild(input);
    return res;
}

Answer 2

我认为这不容易。

根据http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form

的规格

表单所有者必须存在才能设置为元素。
元素必须位于文档中才能更改其表单所有者

检测对HTML5 <input form =“”/>属性的支持

2 个答案: