CODEWITHSUNDEEP
javascripthtml
Chowlett
Chowlett

Reputation: 46667

Detect support for HTML5 <input form=""> attribute

How can I check whether a browser supports the HTML5 form attribute on input elements?

Following this question, I've tried the following:

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

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

  return false;
}

... but that gives a false negative for FireFox (14, at least). Replacing input.form with input.getAttribute("form") gives a false positive for IE 9.

Upvotes: 5

Views: 1318

Answers (2)

Sev
Sev

Reputation: 1992

For input elements there was a reference to the parent form before the HTML5 form reference feature and this causes this problem you mention.

I hope there is a more elegant way to check if it is supported but for now you could use the following (but it involves dealings with the 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;
}

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195971

I do not think it is that easy.

According to the specs at http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form

  1. The form owner must exist in order to be set to an element.
  2. The element must be in the document in order to alter its form owner

Upvotes: 0

Related Questions