在HTML中
获取input框
输入值有多种方法，以下为你详细介绍：
### 使用JavaScript的`document.getElementById()`方法
若
input元素有唯一的`id`属性，可使用`document.getElementById()`方法
获取该元素，再通过`value`属性得到
输入值。示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<
input type="text" id="my
Input" value="示例文本">
<button onclick="getValue()">
获取值</button>
<script>
function getValue() {
var
inputElement = document.getElementById('my
Input');
var
inputValue =
inputElement.value;
console.log(
inputValue);
}
</script>
</body>
</html>
```
### 使用JavaScript的`document.querySelector()`方法
`document.querySelector()`方法可通过CSS选择器选择元素，
获取input元素的
输入值。示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<
input type="text" class="
inputClass" value="示例文本">
<button onclick="getValue()">
获取值</button>
<script>
function getValue() {
var
inputElement = document.querySelector('.
inputClass');
var
inputValue =
inputElement.value;
console.log(
inputValue);
}
</script>
</body>
</html>
```
### 实时
获取输入值
实时
获取input输入框中的
值需要`on
input`和`onpropertychange`属性来实现。由于`onpropertychange`属性为IE专属，而`on
input`属性支持大部分浏览器，包括IE9及以上的版本。示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<
input type="text" on
input="showValue(this)" onpropertychange="showValue(this)">
<script>
function showValue(
input) {
console.log(
input.value);
}
</script>
</body>
</html>
```
### 在ASP.NET后台
获取input值
在ASP.NET中，若要在后台
获取input的
输入值，需要为它添加`id`和`runat="server"`两个属性，然后通过`id`对应的名称`.Value`来
获取输入的
值。示例代码如下：
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<
input type="text" id="my
Input" runat="server" />
<asp:Button ID="btnGetValue" runat="server" Text="
获取值" OnClick="btnGetValue_Click" />
</form>
</body>
</html>
```
```csharp
using System;
using System.Web.UI;
public partial class _Default : Page
{
protected void btnGetValue_Click(object sender, EventArgs e)
{
string
inputValue = my
Input.Value;
Response.Write("
输入的
值是：" +
inputValue);
}
}
```
本文介绍了一种使用JavaScript/jQuery通过元素ID和名称属性获取HTML input输入框值的方法。提供了两种实用的代码实现方式。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
