如何在 HTML 输入文本字段中放置响应式清除按钮？

输入字段内的响应按钮将清除单击事件上的文本区域。在本文中，我们将讨论如何使用 HTML、CSS 和 JavaScript 在 HTML 输入字段中放置响应式清除按钮。为了将按钮放在输入字段中，我们将使用 CSS。让我们先看看 HTML。

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

• HTML 代码：通过使用 HTML，我们将在输入字段中添加响应按钮以清除该字段。我们创建了一个文本字段和一个按钮，并将它们放在同一个部门中。为了使按钮适合输入文本字段，需要以下 css。

  
  
    
  
      
      
      
  
    
  
      
  GeeksoforGeeks
      Responsive clear field button
      
  
  
      
  
          
          clear
      
  
    
  
  

设计结构：在本节中，我们将设计结构使其具有吸引力或意义。

• CSS 代码：将父分区的位置属性设置为relative 。在分区内将按钮的位置设置为绝对位置。上述两个动作使我们可以将按钮移动到 div 的右上角位置，这会将按钮移动到输入字段内并将其放置在右端。为此，我们将顶部和右侧边距设置为 0px，但是该值可以根据设计要求而变化。我们将Z-Index 设置为大于 1以将按钮定位在输入字段上方的层。

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

• JavaScript 代码：用于使清晰按钮响应的 javascript 代码。

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

• jQuery代码：

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

最终解决方案：在本节中，我们将所有部分组合在一起，但如果您想通过使用 jQuery 部分来完成任务，则必须使用 CDN 链接。

CDN jQuery 链接：

程序：

  

    
    
    Responsive clear field button
    
        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);
        }
    

  


    GeeksoforGeeks
    Responsive clear field button
    
    
    
        
        clear
    

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

  

输出：