|
| 1 | +# <input> 元素 |
| 2 | + |
| 3 | +`<input>`元素主要用于表单组件,它继承了 HTMLInputElement 接口。 |
| 4 | + |
| 5 | +## HTMLInputElement 的实例属性 |
| 6 | + |
| 7 | +### 特征属性 |
| 8 | + |
| 9 | +- `name`:字符串,表示`<input>`节点的名称。该属性可读写。 |
| 10 | +- `type`:字符串,表示`<input>`节点的类型。该属性可读写。 |
| 11 | +- `disabled`:布尔值,表示`<input>`节点是否禁止使用。一旦被禁止使用,表单提交时不会包含该`<input>`节点。该属性可读写。 |
| 12 | +- `autofocus`:布尔值,表示页面加载时,该元素是否会自动获得焦点。该属性可读写。 |
| 13 | +- `required`:布尔值,表示表单提交时,该`<input>`元素是否必填。该属性可读写。 |
| 14 | +- `value`:字符串,表示该`<input>`节点的值。该属性可读写。 |
| 15 | +- `validity`:返回一个`ValidityState`对象,表示`<input>`节点的校验状态。该属性只读。 |
| 16 | +- `validationMessage`:字符串,表示该`<input>`节点的校验失败时,用户看到的报错信息。如果该节点不需要校验,或者通过校验,该属性为空字符串。该属性只读。 |
| 17 | +- `willValidate`:布尔值,表示表单提交时,该`<input>`元素是否会被校验。该属性只读。 |
| 18 | + |
| 19 | +### 表单相关属性 |
| 20 | + |
| 21 | +- `form`:返回`<input>`元素所在的表单(`<form>`)节点。该属性只读。 |
| 22 | +- `formAction`:字符串,表示表单提交时的服务器目标。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`action`属性。 |
| 23 | +- `formEncType`:字符串,表示表单提交时数据的编码方式。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`enctype`的属性。 |
| 24 | +- `formMethod`:字符串,表示表单提交时的 HTTP 方法。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`method`属性。 |
| 25 | +- `formNoValidate`:布尔值,表示表单提交时,是否要跳过校验。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`formNoValidate`属性。 |
| 26 | +- `formTarget`:字符串,表示表单提交后,服务器返回数据的打开位置。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`target`属性。 |
| 27 | + |
| 28 | +### 文本输入框的特有属性 |
| 29 | + |
| 30 | +以下属性只有在`<input>`元素可以输入文本时才有效。 |
| 31 | + |
| 32 | +- `autocomplete`:字符串`on`或`off`,表示该`<input>`节点的输入内容可以被浏览器自动补全。该属性可读写。 |
| 33 | +- `maxLength`:整数,表示可以输入的字符串最大长度。如果设为负整数,会报错。该属性可读写。 |
| 34 | +- `size`:整数,表示`<input>`节点的显示长度。如果类型是`text`或`password`,该属性的单位是字符个数,否则单位是像素。该属性可读写。 |
| 35 | +- `pattern`:字符串,表示`<input>`节点的值应该满足的正则表达式。该属性可读写。 |
| 36 | +- `placeholder`:字符串,表示该`<input>`节点的占位符,作为对元素的提示。该字符串不能包含回车或换行。该属性可读写。 |
| 37 | +- `readOnly`:布尔值,表示用户是否可以修改该节点的值。该属性可读写。 |
| 38 | +- `min`:字符串,表示该节点的最小数值或日期,且不能大于`max`属性。该属性可读写。 |
| 39 | +- `max`:字符串,表示该节点的最大数值或日期,且不能小于`min`属性。该属性可读写。 |
| 40 | +- `selectionStart`:整数,表示选中文本的起始位置。如果没有选中文本,返回光标在`<input>`元素内部的位置。该属性可读写。 |
| 41 | +- `selectionEnd`:整数,表示选中文本的结束位置。如果没有选中文本,返回光标在`<input>`元素内部的位置。该属性可读写。- `selectionDirection`:字符串,表示选中文本的方向。可能的值包括`forward`(与文字书写方向一致)、`backward`(与文字书写方向相反)和`none`(文字方向未知)。该属性可读写。 |
| 42 | + |
| 43 | +### 复选框和单选框的特有属性 |
| 44 | + |
| 45 | +如果`<input>`元素的类型是复选框(checkbox)或单选框(radio),会有下面的特有属性。 |
| 46 | + |
| 47 | +- `checked`:布尔值,表示该`<input>`元素是否选中。该属性可读写。 |
| 48 | +- `defaultChecked`:布尔值,表示该`<input>`元素默认是否选中。该属性可读写。 |
| 49 | +- `indeterminate`:布尔值,表示该`<input>`元素是否还没有确定的状态。一旦用户点击过一次,该属性就会变成`false`,表示用户已经给出确定的状态了。该属性可读写。 |
| 50 | + |
| 51 | +### 图像按钮的特有属性 |
| 52 | + |
| 53 | +如果`<input>`元素的类型是`image`,就会变成一个图像按钮,会有下面的特有属性。 |
| 54 | + |
| 55 | +- `alt`:字符串,图像无法显示时的替代文本。该属性可读写。 |
| 56 | +- `height`:字符串,表示该元素的高度(单位像素)。该属性可读写。 |
| 57 | +- `src`:字符串,表示该元素的图片来源。该属性可读写。 |
| 58 | +- `width`:字符串,表示该元素的宽度(单位像素)。该属性可读写。 |
| 59 | + |
| 60 | +### 文件上传按钮的特有属性 |
| 61 | + |
| 62 | +如果`<input>`元素的类型是`file`,就会变成一个文件上传按钮,会有下面的特有属性。 |
| 63 | + |
| 64 | +- `accept`:字符串,表示该元素可以接受的文件类型,类型之间使用逗号分隔。该属性可读写。 |
| 65 | +- `files`:返回一个`FileList`实例对象,包含了选中上传的一组`File`实例对象。 |
| 66 | + |
| 67 | +### 其他属性 |
| 68 | + |
| 69 | +- `defaultValue`:字符串,表示该`<input>`节点的原始值。 |
| 70 | +- `dirName`:字符串,表示文字方向。 |
| 71 | +- `accessKey`:字符串,表示让该`<input>`节点获得焦点的某个字母键。 |
| 72 | +- `list`:返回一个`<datalist>`节点,该节点必须绑定`<input>`元素,且`<input>`元素的类型必须可以输入文本,否则无效。该属性只读。 |
| 73 | +- `multiple`:布尔值,表示是否可以选择多个值。 |
| 74 | +- `labels`:返回一个`NodeList`实例,代表绑定当前`<input>`节点的`<label>`元素。该属性只读。 |
| 75 | +- `step`:字符串,表示在`min`属性到`max`属性之间,每次递增或递减时的数值或时间。 |
| 76 | +- `valueAsDate`:`Date`实例,一旦设置,该`<input>`元素的值会被解释为指定的日期。如果无法解析该属性的值,`<input>`节点的值将是`null`。 |
| 77 | +- `valueAsNumber`:浮点数,当前`<input>`元素的值会被解析为这个数值。 |
0 commit comments