如何在HTML输入文本字段内放置一个响应的清除按钮

如何在HTML输入文本字段内放置一个响应的清除按钮？

输入框内的响应式按钮将在点击事件中清除文本区域。在这篇文章中，我们将讨论如何使用HTML、CSS和JavaScript在HTML输入框中放置一个响应式的清除按钮。为了把按钮放在输入框内，我们将使用CSS。让我们先看看HTML。

创建结构：在本节中，我们将为输入栏创建基本结构。

HTML代码。通过使用HTML，我们将把输入字段放置在我们将添加一个响应式按钮来清除该字段。我们创建一个文本字段和一个按钮，并把它们放在同一个区域内。为了使按钮适合输入文本字段，需要使用以下css。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Responsive clear field button</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <b>Responsive clear field button</b>
    <br><br>
    <div class="buttonIn">
        <input type="text" id="enter">
        <button id="clear">clear
    </div>
</body>
 
</html>

设计结构：在这一部分，我们将设计结构，使其具有吸引力或意义。

CSS代码。将父分部的位置属性设置为相对。将按钮在分部中的位置设为绝对值。以上两个动作使我们有可能将按钮移到div的右上角位置，这将使按钮移到输入框内，并将其置于右端。为了做到这一点，我们将顶部和右侧的边距设置为0px，但是这个值可以根据设计要求而变化。我们设置了一个大于1的Z-Index，以使按钮位于输入栏上方的一层。

<style>
    h1 {
        color: green;
    }
     
    .buttonIn {
        width: 300px;
        position: relative;
    }
     
    input {
        margin: 0px;
        padding: 0px;
        width: 100%;
        outline: none;
        height: 30px;
        border-radius: 5px;
    }
     
    button {
        position: absolute;
        top: 0;
        border-radius: 5px;
        right: 0px;
        z-index: 2;
        border: none;
        top: 2px;
        height: 30px;
        cursor: pointer;
        color: white;
        background-color: #1e90ff;
        transform: translateX(2px);
    }
     
</style>

响应式结构：在这一部分，我们可以使用下面的任何一个代码部分，通过使用vanilla JavaScript来使其响应，或者我们也可以使用jQuery来实现。在下面的两个方法中，基本方法是一样的。我们监听按钮的点击事件，一旦它被触发，我们将输入字段的值设置为空字符串。

JavaScript代码。用于使清除按钮响应的JavaScript代码。

<script>
    window.addEventListener('load', () => {
        const button = document.querySelector('#clear');
        button.addEventListener('click', () => {
            document.querySelector('#enter').value = "";
        });
    });
</script>

jQuery 代码:

$(document).ready(()=>
        {
            alert("nigge")
            $('#clear').on('click', () =>
            {
                $('#enter').val("");
            })
        });

最终解决方案：在这一节中，我们将把所有的部分结合在一起，但必须使用CDN链接，如果你想通过使用jQuery部分来实现这一任务。

CDN的jQuery链接。

<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>

代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Responsive clear field button</title>
    <style>
        h1 {
            color: green;
        }
        .buttonIn {
            width: 300px;
            position: relative;
        }
         
        input {
            margin: 0px;
            padding: 0px;
            width: 100%;
            outline: none;
            height: 30px;
            border-radius: 5px;
        }
         
        button {
            position: absolute;
            top: 0;
            border-radius: 5px;
            right: 0px;
            z-index: 2;
            border: none;
            top: 2px;
            height: 30px;
            cursor: pointer;
            color: white;
            background-color: #1e90ff;
            transform: translateX(2px);
        }
    </style>
</head>
 
<body>
<center>
    <h1>GeeksforGeeks</h1>
    <b>Responsive clear field button</b>
    <br>
    <br>
    <div class="buttonIn">
        <input type="text" id="enter">
        <button id="clear">clear
    </div>
<center>
    <script>
    window.addEventListener('load', () => {
        const button = document.querySelector('#clear');
        button.addEventListener('click', () => {
            document.querySelector('#enter').value = "";
        });
    });
   </script>
</body>
 
</html>