在 HTML 中,<input> 元素的 type 属性设置为 "text" 表示文本输入框。文本输入框允许用户输入文本信息。在 DOM(文档对象模型)中,你可以使用 JavaScript 操作文本输入框的元素。

以下是一个简单的例子,演示如何获取文本输入框的 DOM 对象以及如何使用它:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Input Element</title>
</head>
<body>

<label for="textInput">Enter text:</label>
<input type="text" id="textInput">

<script>
    // 通过 id 获取文本输入框的 DOM 对象
    var textInput = document.getElementById("textInput");

    // 添加事件监听器,以便在文本输入改变时触发
    textInput.addEventListener("input", function() {
        // 获取输入的文本值
        var enteredText = textInput.value;

        // 在控制台输出输入的文本值
        console.log("Entered text: " + enteredText);
    });
</script>

</body>
</html>

在这个例子中,我们使用 addEventListener 来监听文本输入框的 input 事件。当用户输入文本时,将触发事件处理程序,并输出所输入的文本值。文本输入框的值可以通过 JavaScript 进行获取和处理。

文本输入框还可以通过 placeholder 属性设置一个占位符,向用户提供输入的建议。这个占位符会在用户未输入内容时显示在文本输入框中。


转载请注明出处:http://www.zyzy.cn/article/detail/4408/HTML