HTML 如何删除输入框中的默认文本

在本文中，我们将介绍如何在开始输入后删除HTML输入框中的默认文本。

阅读更多：HTML 教程

介绍

在网页开发中，我们经常需要在输入框中提供默认的文本，以帮助用户了解应该输入什么内容。然而，默认文本通常会干扰用户真正的输入，并在用户开始输入时不自动删除。本文将重点介绍如何使用HTML和JavaScript来实现输入框中的默认文本的删除。

使用placeholder属性

HTML5提供了一个名为placeholder的属性，可以用来在输入框中显示默认文本。当用户将焦点放置在输入框中时，该默认文本会自动消失，无需额外的代码。下面是一个例子：

<input type="text" placeholder="请输入您的姓名" />

在上述示例中，输入框中的默认文本是“请输入您的姓名”。一旦用户开始在该输入框中输入文本，就会自动删除默认文本。

使用JavaScript实现

如果你需要在旧版本的HTML中实现类似的功能，或者想要进一步定制默认文本的样式和行为，你可以使用JavaScript来完成。下面是使用纯JavaScript的示例：

<input type="text" id="myInput" value="请输入您的姓名" onfocus="clearDefaultText(this)" />

<script>
    function clearDefaultText(input) {
        if (input.value == input.defaultValue) {
            input.value = '';
        }
    }
</script>

在上述示例中，我们使用JavaScript定义了一个名为clearDefaultText的函数，并将其绑定到输入框的onfocus事件上。当用户点击输入框并将其设置为活动状态时，该函数会检查输入框的当前值是否等于默认值。如果相等，则将输入框的值设置为空。

兼容性考虑

请注意，placeholder属性是在HTML5中引入的，因此在较旧的浏览器版本中可能无法正常工作。为了确保兼容性，建议使用JavaScript来实现默认文本的删除。

示例应用

接下来，我们将演示一个实际的示例，展示如何在用户开始输入后删除输入框中的默认文本。

<input type="text" id="myInput" value="搜索..." onfocus="clearDefaultText(this)" onblur="restoreDefaultText(this)" />

<script>
    function clearDefaultText(input) {
        if (input.value == input.defaultValue) {
            input.value = '';
        }
    }

    function restoreDefaultText(input) {
        if (input.value == '') {
            input.value = input.defaultValue;
        }
    }
</script>