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

引言

你好呀,我是小邹。

点击访问 我的个人博客

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

效果图

HTML结构

我们的示例代码基于一个标准的输入框,我们将在输入框右侧嵌入一个清除图标。这里是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代码:

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

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

JavaScript逻辑

为了让清除图标在输入框有文本时显示,并在点击时清除文本,我们需要使用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';
        });
    });
});

这段代码监听了inputfocusblur事件,根据输入框的状态显示或隐藏清除图标。当清除图标被点击时,会清空输入框并再次隐藏图标。

总结

通过上述步骤,我们可以轻松地在网页表单中实现一个实用且美观的实时输入清除功能。这不仅提高了用户交互的便利性,也增强了整体的用户体验。希望这篇文章能帮助你优化自己的网站或应用程序的用户界面设计。

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo6 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端