JS 获取用户输入 - Javascript

当开发 Web 应用程序时，获取用户输入是一个非常常见的任务。JavaScript 为我们提供了多种方式来获取用户输入。无论您是想在提交表单时获取用户输入，还是想在点击按钮时获取用户输入，JavaScript 都有您需要的方法。

获取输入值

使用 prompt() 方法

JavaScript 的 prompt() 方法用于显示一个对话框，提示用户输入文本。prompt() 方法接受一个参数，表示要向用户提供的提示信息。当用户输入文本后，prompt() 方法返回输入的文本。下面是 prompt() 方法的一个示例：

const userInput = prompt('请输入您的姓名：');
console.log(userInput);

以上代码会显示一个带有文本输入框的对话框，提示用户输入姓名。用户输入后，输入的姓名会被存储在 userInput 变量中，最后将其输出到控制台。

使用 input 元素

HTML 中的 input 元素可以让用户输入文本、数字、密码等不同类型的内容。可以使用 JavaScript 来访问 input 元素的值。假设我们有一个包含 input 元素的 HTML：

<label for="username">请输入您的用户名：</label>
<input type="text" id="username">

我们可以使用以下代码来获取 input 元素的值：

const usernameInput = document.getElementById('username');
const username = usernameInput.value;
console.log(username);

以上代码先使用 getElementById() 方法获取 input 元素，然后使用 value 属性获取用户输入的值，并将其存储在 username 变量中，最后将其输出到控制台。

使用表单

在 Web 应用程序中，表单是一种很好的方式来收集用户输入。HTML 中的表单提供了多种控件，例如文本框、复选框、单选按钮、下拉列表等，可以让用户输入不同类型的内容。表单也可以使用 JavaScript 来访问用户输入的值。假设我们有一个简单的 HTML 表单：

<form>
  <label for="name">请输入您的姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="gender">请选择您的性别：</label>
  <select id="gender" name="gender">
    <option value="male">男性</option>
    <option value="female">女性</option>
  </select>
  <br>
  <label for="agree">我同意注册协议</label>
  <input type="checkbox" id="agree" name="agree">
  <br>
  <button type="button" onclick="submitForm()">提交</button>
</form>

我们可以添加一个 JavaScript 函数来处理表单提交：

function submitForm() {
  const form = document.querySelector('form');
  const nameInput = form.querySelector('#name');
  const genderInput = form.querySelector('#gender');
  const agreeInput = form.querySelector('#agree');
  
  const name = nameInput.value;
  const gender = genderInput.value;
  const agree = agreeInput.checked;
  
  console.log(name, gender, agree);
}

以上代码获取表单元素的值，包括文本框、下拉列表和复选框。querySelector() 方法用于获取匹配选择器的第一个元素。我们可以使用 checked 属性来检查复选框是否被选中。

总结

以上是 JavaScript 中获取用户输入的多种方法。prompt() 方法用于显示对话框并获取用户输入的文本；input 元素提供了多种输入控件，可以使用 value 属性来获取用户输入的值；HTML 表单则提供了多种类型的控件，包括文本框、下拉列表和复选框。无论您选择哪种方法，都可以方便地获取用户输入的值并进行后续处理。