将文本从输入字段传递到 JavaScript 函数 - HTML

在前端开发中，我们经常需要将用户在输入框中输入的文本传递到 JavaScript 函数中进行处理。下面介绍两种常见的方式。

使用 onclick 事件

我们可以在 HTML 的输入框中设置一个按钮，当用户点击按钮时触发 JavaScript 函数，并将输入框中的值传递到函数中。

<input type="text" id="input-box">
<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  var text = document.getElementById("input-box").value;
  // 处理输入框中的文本
  console.log(text);
}
</script>

在上述代码中，我们定义了一个文本框和一个按钮，在用户点击按钮时触发 myFunction 函数。函数中使用 document.getElementById() 方法获取输入框的值，并进行后续处理。

使用表单提交

我们还可以使用表单提交的方式将输入框中的文本传递到 JavaScript 函数中。这种方式可以将多个输入框的值一起提交。

<form>
  <label>Enter your name:</label>
  <input type="text" name="name">
  <br>
  <label>Enter your email:</label>
  <input type="email" name="email">
  <br>
  <button type="submit" onclick="myFunction()">Submit</button>
</form>

<script>
function myFunction() {
  var name = document.forms[0]["name"].value;
  var email = document.forms[0]["email"].value;
  // 处理输入框中的文本
  console.log(name, email);
}
</script>

在上述代码中，我们使用表单将输入框的值提交到 myFunction() 函数中。在函数中，我们使用 document.forms[0]["name"].value 和 document.forms[0]["email"].value 分别获取输入框中的名称和邮件地址，并进行后续处理。

总结：以上是两种将文本从输入字段传递到 JavaScript 函数的方式，我们可以根据实际需求选择其中一种。需要注意的是，在处理输入框中的文本时，我们要对文本进行验证，以避免安全问题的产生。