首页 » JavaScript » 共有的表单字段属性

共有的表单字段属性

除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有字段共有的。表单字段共有的属性和方法如下。

  • disabled:布尔值,表示当前字段是否被禁用。
  • form:指向当前字段所属表单的指针;只读。
  • name:当前字段的名称。
  • readOnly:布尔值,表示当前字段是否只读。
  • tabIndex:表示当前字段的切换(tab)序号。
  • type:当前字段的类型,如“checkbox”、“radio”,等等。
  • value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。

除了form属性之外,可以通过JavaScript动态的修改其它任何属性。来看下面的例子:

var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value属性
field.value = "Another value";
//检查form属性的值
alert(field.form === form); //true;
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改type属性(不推荐,但对<input>来说是可行的);
field.type = "checkbox";

能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。例如,很多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻倍。为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听submit事件,并在该事件发生时禁用提交按钮即可。以下就是一个例子:

//避免多次提交表单
EventUtil.addHandler(form, "submit", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    //取得提交按钮
    var btn = target.elements["submit-btn"];
    //禁用它
    btn.disabled = true;
});

以上代码为表单的submit事件添加了一个事件处理程序。事件触发后,代码取得了提交按钮并将其disabled属性设置为true。注意,不能通过onclick事件处理程序来实现这个功能,原因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的submit事件之前触发click事件,而有的浏览器则相反。对于先触发click事件的浏览器,意味着会在提交发生之前禁用按钮,结果永远都不会提交表单。因此,最好是通过submit事件来禁用提交按钮。不过,这种方式不适合表单中不包含提交按钮的情况;如前所述,只有在包含提交按钮的情况下,才有可能触发表单的submit事件。

除了<fieldset>之外,所有的表单字段都有type属性。对于<input>元素,这个值等于HTML特性type的值。对于其它元素,这个type属性的值如下表所列:

说明HTML示例type属性的值
单选列表<select></select“select-one”
多选列表<select multiple></select>“select-multiple”
自定义按钮<button></button>“submit”
自定义非提交按钮<button type=”button”></button>“button”
自定义重置按钮<button type=”reset”></button>“reset”
自定义提交按钮<button type=”submit”></button>“submit”

<input>和<button>元素的type属性是可以动态修改的,而<select>元素的type属性则是只读的。

此文章发表在 JavaScript. 将 固定链接 加入收藏.