Skip to content

Commit 46b04ff

Browse files
committed
docs(elements): edit input
1 parent 19db1a2 commit 46b04ff

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

docs/elements/input.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,33 @@
7575
- `step`:字符串,表示在`min`属性到`max`属性之间,每次递增或递减时的数值或时间。
7676
- `valueAsDate``Date`实例,一旦设置,该`<input>`元素的值会被解释为指定的日期。如果无法解析该属性的值,`<input>`节点的值将是`null`
7777
- `valueAsNumber`:浮点数,当前`<input>`元素的值会被解析为这个数值。
78+
79+
## HTMLInputElement 的实例方法
80+
81+
- `focus()`:当前`<input>`元素获得焦点。
82+
- `blur()`:移除`<input>`元素的焦点。
83+
- `select()`:选中`<input>`元素内部的所有文本。该方法不能保证`<input>`获得焦点,最好先用`focus()`方法,再用这个方法。
84+
- `click()`:模拟鼠标点击当前的`<input>`元素。
85+
- `setSelectionRange()`:选中`<input>`元素内部的一段文本,但不会将焦点转移到选中的文本。该方法接受三个参数,第一个参数是开始的位置(从0开始),第二个参数是结束的位置(不包括该位置),第三个参数是可选的,表示选择的方向,有三个可能的值(`forward``backward`和默认值`none`)。
86+
- `setRangeText()`:新文本替换选中的文本。该方法接受四个参数,第一个参数是新文本,第二个参数是替换的开始位置,第三个参数是结束位置,第四个参数表示替换后的行为(可选),有四个可能的值:`select`(选中新插入的文本)、`start`(选中的开始位置移到插入的文本之前)、`end`(选中的文本移到插入的文本之后)、`preserve`(保留原先选中的位置,默认值)。
87+
- `setCustomValidity()`:该方法调用后,会提示用户校验失败。它的参数就是报错的提示信息。
88+
- `checkValidity()`:返回一个布尔值,表示当前节点的校验结果。如果返回`false`,表示不满足校验要求,否则就是校验成功或不必校验。
89+
- `stepDown()`:将当前`<input>`节点的值减少一个步长。该方法可以接受一个整数`n`作为参数,表示一次性减少`n`个步长,默认是`1`。有几种情况会抛错:当前`<input>`节点不适合递减或递增、当前节点没有`step`属性、`<input>`节点的值不能转为数字、递减之后的值小于`min`属性或大于`max`属性。
90+
- `stepUp()`:将当前`<input>`节点的值增加一个步长。其他与`stepDown()`方法相同。
91+
92+
下面是`setSelectionRange()`方法的一个例子。
93+
94+
```javascript
95+
/* HTML 代码如下
96+
<p><input type="text" id="mytextbox" size="20" value="HelloWorld"/></p>
97+
<p><button onclick="SelectText()">选择文本</button></p>
98+
*/
99+
100+
function SelectText() {
101+
var input = document.getElementById('mytextbox');
102+
input.focus();
103+
input.setSelectionRange(2, 5);
104+
}
105+
```
106+
107+
上面代码中,点击按钮以后,会选中`llo`三个字符。

0 commit comments

Comments
 (0)