javascrip 取 text 控件的值

原创

mob649e815ecee0 2024-07-30 05:57:54 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815ecee0的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 取文本控件的值

在网页开发中，JavaScript 是一种非常强大的语言，它允许我们与 HTML 元素进行交互，获取它们的值，甚至修改它们。在本文中，我们将探讨如何使用 JavaScript 来获取文本控件（如 <input> 和 <textarea>）的值。

什么是文本控件？

在 HTML 中，<input> 和 <textarea> 是两种常见的文本控件。<input> 通常用于输入较短的文本，如用户名、密码等。而 <textarea> 则用于输入较长的文本，如评论或消息。

如何获取文本控件的值？

要获取文本控件的值，我们可以使用 JavaScript 的 value 属性。以下是一些示例代码：

// 获取 input 控件的值
var inputElement = document.getElementById("myInput");
var inputValue = inputElement.value;

// 获取 textarea 控件的值
var textareaElement = document.getElementById("myTextarea");
var textareaValue = textareaElement.value;

在上面的代码中，我们首先使用 document.getElementById() 方法获取控件的引用，然后通过 value 属性获取其值。

代码示例

假设我们有一个 HTML 页面，其中包含一个 <input> 控件和一个 <textarea> 控件：

<!DOCTYPE html>
<html>
<head>
  <title>获取文本控件的值</title>
</head>
<body>
  <input type="text" id="myInput" placeholder="输入文本">
  <textarea id="myTextarea" placeholder="输入更长的文本"></textarea>
  <button onclick="getValues()">获取值</button>

  <script>
    function getValues() {
      var inputElement = document.getElementById("myInput");
      var textareaElement = document.getElementById("myTextarea");
      var inputValue = inputElement.value;
      var textareaValue = textareaElement.value;

      console.log("Input Value: " + inputValue);
      console.log("Textarea Value: " + textareaValue);
    }
  </script>
</body>
</html>

在这个示例中，我们定义了一个按钮，当点击按钮时，会调用 getValues() 函数。该函数获取 <input> 和 <textarea> 控件的值，并将它们输出到控制台。