表单元素覆盖表单对象的默认属性

时间:2014-10-15 23:44:06

标签: javascript html forms

假设我们有一个包含以下输入的表单:(是的,如果我们真的想拥有这些名称会怎么样)

<form id="form-id">
    <input type="text" name="submit" />
    <input type="text" name="elements" />
    <input type="text" name="id" />
    <input type="text" name="addEventListener" />
</form>

现在,如果我们尝试访问表单属性,我们得到的只是输入对象:

var form = document.getElementById('form-id');

form.elements; // will be <input type="text" name="elements" /> instead of a list of elements

同样的问题:

form.submit;
form.id;
form.addEventListener;

以及表单对象的所有其他默认属性。

我知道我们可以找到一些其他方式来访问这些属性...... 但我们应该怎样处理那些我们不能做到的事情?

我认为标准应该是不同的,例如:

form.elements = {
    "submit": [object HTMLFormElement],   // <input type="text" name="submit" />
    "elements": [object HTMLFormElement], // <input type="text" name="elements" />
    ...
    etc
}

不是表格本身的属性。

您的建议。

1 个答案:

答案 0 :(得分:0)

当然,最简单的方法是大肆渲染问题而忘掉它。但我走得更远,发现如何解决这个问题。所以我会把它留在这里。 IE9 +

HTMLFormElement.prototype.getRealAttribute = function(name) {
    var form = this;
    var tmpForm = document.createElement('FORM');

    /* if it's not overridden */
    if (Object.prototype.toString.call(tmpForm[name]) === Object.prototype.toString.call(form[name])) {
        if (Object.prototype.toString.call(tmpForm[name]) === "[object Function]") {
            return form[name].bind(form);
        }
        return form[name];
    }

    /* if it's overridden function */
    if (HTMLFormElement.prototype[name]) {
        return HTMLFormElement.prototype[name].bind(form);
    }

    /* if it's an attribute */
    if (form.attributes[name]) {
        return form.attributes[name].value;
    }

    /* if it's an overridden property */
    var fieldSet = document.createElement('FIELDSET');
    fieldSet.innerHTML = form.innerHTML;

    return fieldSet[name] || null;
};