JS 清空输入框中的内容|极客笔记

JS 清空输入框中的内容

在Web开发中，经常会遇到需要清空文本输入框中的内容的情况。这在表单提交后重置输入框内容、实时搜索框中清空查询内容等场景中经常会用到。本文将详细介绍如何利用JavaScript来清空输入框中的内容。

使用原生JavaScript

使用原生JavaScript可以操作DOM节点，从而实现清空输入框中的内容。我们可以通过获取输入框元素的value值，并将其赋为空字符串来实现清空输入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear Input</title>
</head>
<body>
    <input type="text" id="inputBox" value="Initial Value">
    <button onclick="clearInput()">Clear Input</button>

    <script>
        function clearInput() {
            document.getElementById('inputBox').value = '';
        }
    </script>
</body>
</html>

在上面的代码中，我们首先创建了一个文本输入框和一个按钮，点击按钮时会执行clearInput函数，该函数会将输入框的value值清空。

效果如下：

当页面加载完成时，文本输入框中会显示”Initial Value”。
点击按钮后，输入框中的内容会被清空。

使用jQuery

如果项目中已经引入了jQuery库，那么可以简化清空输入框的操作。jQuery提供了val()方法来设置或获取表单元素的值，我们可以使用该方法来清空输入框中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear Input with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="inputBox" value="Initial Value">
    <button id="clearButton">Clear Input</button>

    <script>
         $('#clearButton').click(function() {$ ('#inputBox').val('');
        });
    </script>
</body>
</html>

上述代码中，我们引入了jQuery库，并在按钮的点击事件中使用了val('')方法来清空文本输入框中的内容。

实际应用场景

除了简单的演示页面外，清空输入框的操作也会应用到实际的项目开发中。比如，在搜索框中可以增加一个清空按钮，方便用户清除查询内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Box</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="searchBox" placeholder="Search...">
    <button id="clearButton">Clear</button>

    <script>
         $('#clearButton').click(function() {$ ('#searchBox').val('');
        });
    </script>
</body>
</html>

在上述示例中，用户可以在搜索框中输入查询内容，点击”Clear”按钮即可清空输入框的内容。