📌  相关文章
📜  如何从文本框 javascript 中获取输入(1)

📅  最后修改于: 2023-12-03 14:51:47.998000             🧑  作者: Mango

如何从文本框 javascript 中获取输入

在很多 Web 应用程序中，我们需要从用户输入文本或表单。在 JavaScript 中获取输入主要依靠input元素。

以下是从文本框 JavaScript 中获取输入的几种方法：

方法一：使用 document.getElementById()

我们可以通过document.getElementById获得 HTML 元素，然后使用value属性获取该元素的值。

<textarea id="myTextArea"></textarea>
<script>
    var textArea = document.getElementById("myTextArea");
    var text = textArea.value;
    console.log(text);
</script>
方法二：使用 jQuery

在使用 jQuery 时，可以使用val()函数获取输入文本框的值。

<textarea id="myTextArea"></textarea>
<script>
    var text = $("#myTextArea").val(); 
    console.log(text);
</script>
方法三：使用原生 JavaScript

在 JavaScript 中，我们可以通过以下方法获取输入文本框的值。

<textarea id="myTextArea"></textarea>
<script>
    var text = document.querySelector("#myTextArea").value;
    console.log(text);
</script>
示例

下面的示例演示了如何从 input 元素中获取输入，使用 JavaScript 原生方法和 jQuery 方法：

<!DOCTYPE html>
<html>
<head>
    <title>获取文本框中的输入</title>
    <meta charset="utf-8">
</head>
<body>
    <label>请输入您的姓名：</label>
    <input type="text" id="name" placeholder="请输入姓名">
    <button onclick="submit()">提交</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function submit() {
            var name = document.querySelector("#name").value; // 原生 JavaScript
            var name_jQuery = $("#name").val(); // jQuery
            console.log("姓名：" + name);
            console.log("姓名（jQuery）：" + name_jQuery);
        }
    </script>
</body>
</html>

输出如下：

姓名：张三
姓名（jQuery）：张三
总结

以上就是如何从文本框 JavaScript 中获取输入的几种方法，我们可以根据实际需求选择适合自己的方法获取输入。使用 jQuery 相对来说更加优雅简洁，而使用原生 JavaScript 则更灵活。