显示输入表单字符的长度
时间: 2023-10-07 16:14:14 浏览: 39
要在输入表单中显示字符的长度,可以使用 JavaScript 的字符串长度属性 length,并将其显示在页面上。
例如,假设表单中有一个文本框,我们可以使用以下代码来显示该文本框中输入的字符长度:
```html
<input type="text" id="myInput" oninput="showLength()">
<p id="length"></p>
```
```javascript
function showLength() {
var input = document.getElementById("myInput");
var length = input.value.length;
document.getElementById("length").innerHTML = "字符长度为:" + length;
}
```
在上面的代码中,我们使用 oninput 事件来触发 showLength() 函数。该函数获取文本框的值,并使用 length 属性来获取该值的长度,然后将长度显示在页面上。
如果我们想限制文本框中输入字符的最大长度,可以使用 maxlength 属性。例如,如果我们想限制文本框中最多只能输入 10 个字符,可以使用以下代码:
```html
<input type="text" id="myInput" maxlength="10" oninput="showLength()">
<p id="length"></p>
```
```javascript
function showLength() {
var input = document.getElementById("myInput");
var length = input.value.length;
document.getElementById("length").innerHTML = "字符长度为:" + length;
if (length > 10) {
alert("最多只能输入 10 个字符!");
input.value = input.value.substring(0, 10);
}
}
```
在上面的代码中,我们检查输入的字符长度是否超过了 10 个字符,如果超过了,则弹出警告框,并使用 substring() 方法截取前 10 个字符。这样就可以限制文本框中输入字符的最大长度,并在页面上显示字符长度了。