JS获取input的输入值|极客笔记

JS获取input的输入值

在前端开发过程中，经常会涉及到获取用户输入的数据，然后进行相应的处理。而HTML中的input元素是用户最常用来输入数据的方式之一。在这篇文章中，我们将详细介绍如何使用JavaScript来获取input元素中用户输入的值。

HTML中的input元素

在HTML中，input元素是用来接收用户输入的标准元素之一。通过input元素，我们可以创建文本框、密码框、单选框、复选框等不同形式的输入框。以下是几种常见的input类型：

文本框：<input type="text">
密码框：<input type="password">
单选框：<input type="radio">
复选框：<input type="checkbox">

下面是一个简单的HTML代码示例，包含一个文本框和一个按钮：

<!DOCTYPE html>
<html>
<head>
    <title>Input Value Example</title>
</head>
<body>
    <input type="text" id="inputField">
    <button onclick="getValue()">Get Value</button>

    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个文本框,inputField用于用户输入，以及一个按钮，当点击按钮时，会调用JavaScript中的函数getValue()来获取inputField中的值。

使用JavaScript获取input的值

接下来，我们来编写JavaScript代码来获取input元素中用户输入的值。我们在上面的HTML代码中引入了一个外部的脚本文件script.js，接下来我们来编写这个脚本文件。

function getValue() {
    var inputField = document.getElementById('inputField');
    var value = inputField.value;

    alert('Input Value: ' + value);
}

在这段代码中，我们首先通过document.getElementById('inputField')来获取id为inputField的input元素，然后通过inputField.value来获取用户输入的值，并将其保存在变量value中。最后，我们使用alert()函数将获取到的值弹出显示在页面上。