js怎么设置文本框里的默认值

通过JavaScript设置文本框中的默认值有多种方法，包括直接设置HTML属性、使用JavaScript代码设置值、以及利用事件监听器动态更新文本框内容。

其中最常见的方法是直接设置HTML属性和通过JavaScript代码设置文本框的值。下面将详细介绍这些方法并提供代码示例。

一、直接设置HTML属性

HTML表单元素的属性可以直接在HTML代码中定义。这是最简单、最直观的方法。

<input type="text" id="myTextBox" value="默认值">

在这个例子中，value属性直接为文本框设置了默认值“默认值”。这种方法非常适合静态页面，但如果你需要动态更新文本框的值，你可能需要使用JavaScript。

二、通过JavaScript代码设置默认值

使用JavaScript可以在页面加载时或在某个事件触发时设置文本框的默认值。

1、页面加载时设置

你可以通过JavaScript在页面加载时设置文本框的默认值。使用window.onload事件可以确保所有的HTML元素都加载完毕后再执行JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置文本框默认值</title>
    <script>
        window.onload = function() {
            document.getElementById("myTextBox").value = "默认值";
        };
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>
</html>

在这个例子中，window.onload事件会在页面加载完成时执行，其中的JavaScript代码将文本框的值设置为“默认值”。

2、事件触发时设置

你还可以在特定的事件触发时设置文本框的默认值。例如，当用户点击一个按钮时，更新文本框的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置文本框默认值</title>
    <script>
        function setDefaultValue() {
            document.getElementById("myTextBox").value = "默认值";
        }
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
    <button onclick="setDefaultValue()">设置默认值</button>
</body>
</html>

在这个例子中，当用户点击按钮时，setDefaultValue函数将被调用，进而设置文本框的值。

三、使用事件监听器动态更新文本框内容

事件监听器可以用于动态更新文本框的值，比如在输入框失去焦点时设置默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置文本框默认值</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var textBox = document.getElementById("myTextBox");
            textBox.addEventListener("blur", function() {
                if (textBox.value === "") {
                    textBox.value = "默认值";
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>
</html>

在这个例子中，当文本框失去焦点（blur事件）且内容为空时，JavaScript代码将文本框的值设置为“默认值”。

四、结合CSS与JavaScript实现更多功能

除了简单地设置默认值，你还可以结合CSS与JavaScript实现更多功能，比如在文本框为空时显示提示文字。

1、使用CSS实现占位符

HTML5引入了placeholder属性，可以用来在文本框为空时显示提示文字。

<input type="text" id="myTextBox" placeholder="请输入内容">

这种方法不需要JavaScript，但只能在现代浏览器中使用。

2、结合JavaScript实现更复杂的占位符功能

对于不支持placeholder属性的浏览器，或者需要更复杂的功能，你可以结合JavaScript来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置文本框默认值</title>
    <style>
        .placeholder {
            color: #aaa;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var textBox = document.getElementById("myTextBox");
            var placeholderText = "请输入内容";
            textBox.value = placeholderText;
            textBox.classList.add("placeholder");
            textBox.addEventListener("focus", function() {
                if (textBox.value === placeholderText) {
                    textBox.value = "";
                    textBox.classList.remove("placeholder");
                }
            });
            textBox.addEventListener("blur", function() {
                if (textBox.value === "") {
                    textBox.value = placeholderText;
                    textBox.classList.add("placeholder");
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>
</html>

在这个例子中，我们通过JavaScript和CSS结合实现了占位符功能。当文本框获得焦点时，如果内容是占位符文本，则清空文本框并移除占位符样式；当文本框失去焦点且内容为空时，设置占位符文本并添加占位符样式。

五、总结

通过JavaScript设置文本框的默认值有多种方法，包括直接设置HTML属性、通过JavaScript代码设置、以及使用事件监听器动态更新文本框内容。具体选择哪种方法取决于你的应用场景和需求。结合CSS与JavaScript可以实现更复杂、更灵活的功能，增强用户体验。在实际开发中，合理运用这些方法可以帮助你打造更加友好和高效的用户界面。