📌  相关文章
📜  如何在 HTML 输入文本字段中放置响应式清除按钮?

📅  最后修改于: 2021-09-02 03:26:02             🧑  作者: Mango

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

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

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

    GeeksoforGeeks

        Responsive clear field button     

        
                          
      

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

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

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

  • JavaScript 代码:用于使清晰按钮响应的 javascript 代码。
    
    
  • jQuery代码:
    $(document).ready(()=>
            {
                alert("nigge")
                $('#clear').on('click', () =>
                {
                    $('#enter').val("");
                })
            });
    

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

  • CDN jQuery 链接:
  • 程序:
    
    
      
    
        
        
        Responsive clear field button
        
    
      
    
    
        

    GeeksoforGeeks

        Responsive clear field button     
        
        
                          
           
  • 输出: