如何获取和操作 JavaScript 中的 Input 值334

简介

在 JavaScript 中，表单输入元素（如输入框、复选框和单选按钮）存储着用户输入的数据。获取这些值并对其进行操作对于构建交互式 Web 页面非常重要。本文将介绍如何获取和操作 JavaScript 中的 input 值。

获取 Input 值

获取 input 值的最基本方法是使用 value 属性。对于以下 HTML 输入元素：```html

```

可以使用以下 JavaScript 代码获取其值：```javascript
const inputValue = ("myInput").value;
```

您还可以使用 getAttribute() 方法获取 input 的属性：```javascript
const inputValue = ("myInput").getAttribute("value");
```

操作 Input 值

一旦获取了 input 值，就可以对其进行操作。这包括更改值、设置值或验证输入。

更改 Input 值

要更改 input 值，可以使用 value 属性。例如，将上面的 input 值更改为 "Hello World"：```javascript
("myInput").value = "Hello World";
```

设置 Input 值

也可以使用 setAttribute() 方法设置 input 值。这与使用 value 属性类似，但更通用，因为它可以设置任何属性：```javascript
("myInput").setAttribute("value", "Hello World");
```

验证 Input 值

验证 input 值对于确保用户输入有效数据非常重要。可以使用 checkValidity() 方法来验证 input 值：```javascript
if (("myInput").checkValidity()) {
// 输入有效
} else {
// 输入无效
}
```

也可以使用自定义正则表达式验证输入：```javascript
const emailRegex = /^[\w-\.]+@[\w-]+\.[a-z]{2,3}$/;
if ((("emailInput").value)) {
// 电子邮件地址有效
} else {
// 电子邮件地址无效
}
```

其他 Input 类型

除了文本输入元素，JavaScript 中还支持其他类型的 input 元素。这些元素的获取和操作方法略有不同。

复选框和单选按钮

复选框和单选按钮使用 checked 属性来指示它们是否被选中。要获取复选框或单选按钮的状态，可以使用以下代码：```javascript
const isChecked = ("myCheckbox").checked;
```

要设置复选框或单选按钮的状态，可以使用以下代码：```javascript
("myCheckbox").checked = true; // 选中复选框
("myRadioButton").checked = true; // 选中单选按钮
```

下拉列表

下拉列表使用 selectedIndex 属性来指示当前选中的选项。要获取当前选中的选项，可以使用以下代码：```javascript
const selectedIndex = ("mySelect").selectedIndex;
```

要设置当前选中的选项，可以使用以下代码：```javascript
("mySelect").selectedIndex = 1; // 选择第二个选项
```

事件处理

可以使用事件处理程序来响应 input 值的变化。例如，可以使用以下代码在 input 值更改时显示一条消息：```javascript
("myInput").addEventListener("change", () => {
alert("输入的值已更改为：" + ("myInput").value);
});
```

获取和操作 JavaScript 中的 input 值是构建交互式 Web 页面必不可少的。通过了解如何使用 value 和 setAttribute() 属性，以及如何验证输入，您可以有效地管理用户输入并构建健壮的应用程序。

2024-12-21

上一篇：JavaScript 16 进制数详解

下一篇：JavaScript 邮箱验证：全面指南