Question

我正在尝试在Javascript中提出一个泛型函数，它可以遍历表单并根据其类型清除表单的任何元素。

为了完成这项工作，我想知道我正在处理什么样的表单元素，包括但不仅仅是选择，输入文本，文本区域，输入按钮....

那么，我如何区分这些元素，以便以适当的方式处理每种类型？

Answer 1

这样的事情应该让你开始

$('form :input').each(function(i, el){
    var type = el.tagName;
});

:input选择器基本上选择所有表单控件。

没有jQuery：

var elem = document.getElementById('theform').elements;
for(var i = 0; i < elem.length; i++)
{
    console.log(elem[i].type);
}

http://jsfiddle.net/8ga7q/2/

Answer 2

您应该考虑使用reset按钮。像这样。

<form action="">
    <input type="text">
    <input type="email">
    <input type="number">
    <input type="radio">
    <input type="checkbox">
    <textarea></textarea>
    <select>
        <option value="">None</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <input type="reset">
</form>

它干净，快速，与IE 2兼容。

MDN Compatibility Table

Example Fiddle

<强> [编辑] 如果您需要通过代码触发重置，则可以使用相同的formElement.reset()。这是reference

Answer 3

您可以使用type属性，该属性是根据HTML5 CR和浏览器实践为控件定义的，即使对于不能将type作为HTML属性的控件也是如此。例如，对于select元素，如果不存在select-one属性，则属性值为multiple，否则为select-multiple字符串。

因此，如果您遍历form元素的所有后代，您将识别type属性中的控件（表单字段）;对于其他元素，type通常是未定义的。

Answer 4

您可以使用tagName。使用jquery，您可以使用以下代码

$('form').children().each(function()
{
 var elementType=$(this).prop('tagName');
});

使用简单的Javascript element.tagName即可。

循环遍历表单时如何知道元素的类型？

4 个答案: