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

📅  最后修改于: 2021-11-03 06:42:23             🧑  作者: Mango

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

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


  

    
    
    Responsive clear field button

  

    

GeeksoforGeeks

    Responsive clear field button     

    
                      
  


CSS


javascript


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


html


  

    
    
    Responsive clear field button
    

  

    

GeeksoforGeeks

    Responsive clear field button     
    
    
                      
       


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

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

CSS


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

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

javascript


  • jQuery代码:

查询

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

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

  • CDN jQuery 链接:
  • 程序:

html



  

    
    
    Responsive clear field button
    

  

    

GeeksoforGeeks

    Responsive clear field button     
    
    
                      
       
  • 输出:

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。

jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。