HTML集成优雅的实时输入清除功能

news2024/9/9 1:11:36

引言

你好呀，我是小邹。

点击访问我的个人博客

在现代网页设计中，用户体验是至关重要的。一个流畅、直观且反应迅速的界面能够显著提升用户满意度。本文将介绍如何在网页表单中集成实时输入清除功能，即在输入框中显示一个“x”图标，允许用户一键清除输入框内的文本。我们将使用HTML、CSS和JavaScript来实现这一功能，同时保持界面的简洁和美观。

效果图

在这里插入图片描述

HTML结构

我们的示例代码基于一个标准的输入框，我们将在输入框右侧嵌入一个清除图标。这里是HTML代码的基本结构：

<div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
    <div class="ui left icon input">
        <i class="qq icon"></i>
        <input type="text" id="QQ" name="qq" placeholder="输入QQ号自动获取昵称头像" required="required">
        <span class="clear-input" style="display: none;">
            <i class="fa fa-times-circle"></i>
        </span>
    </div>
</div>

这里我们使用了<span>元素来包裹清除图标，初始时设置display: none;使其不可见。

CSS样式

为了使清除图标位于输入框的右侧，我们需要使用CSS来定位和美化这个图标。以下是CSS代码：

.clear-input {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none; /* 默认隐藏 */
}

这段代码将清除图标定位在输入框的右上角，并通过transform属性垂直居中。

JavaScript逻辑

为了让清除图标在输入框有文本时显示，并在点击时清除文本，我们需要使用JavaScript来添加事件监听器。下面是JavaScript代码：

document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.ui.left.icon.input input');
    const clearSpans = document.querySelectorAll('.ui.left.icon.input .clear-input');
    
    inputs.forEach((input, index) => {
        // 检查输入框是否非空，如果是，则显示清除图标
        if (input.value) {
            clearSpans[index].style.display = 'block';
        }
        
        // 当输入框内容改变时，显示或隐藏清除图标
        input.addEventListener('input', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            } else {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当输入框获得焦点时，如果已有内容，显示清除图标
        input.addEventListener('focus', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            }
        });
        
        // 当输入框失去焦点且为空时，隐藏清除图标
        input.addEventListener('blur', function () {
            if (!this.value) {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当点击清除图标时，清空输入框并隐藏图标
        clearSpans[index].addEventListener('click', function (event) {
            event.stopPropagation();
            input.value = '';
            clearSpans[index].style.display = 'none';
        });
    });
});