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事件,根据输入框的状态显示或隐藏清除图标。当清除图标被点击时,会清空输入框并再次隐藏图标。

总结

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

相关推荐
前端一课13 小时前
公开分享一个AI番茄短故事模块技术方案(含代码)
前端
晴殇i13 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师13 小时前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js
花开月正圆13 小时前
遇见docker-compose
前端
护国神蛙13 小时前
自动翻译插件中的智能字符串切割方案
前端·javascript·babel
TechFrank13 小时前
浏览器云端写代码,远程开发 Next.js 应用的简易教程
前端
PaytonD13 小时前
LoopBack 2 如何设置静态资源缓存时间
前端·javascript·node.js
snow@li13 小时前
d3.js:学习积累
开发语言·前端·javascript
vincention13 小时前
JavaScript 中 this 指向完全指南
前端
qyresearch_13 小时前
射频前端MMIC:5G时代的技术引擎与市场机遇
前端·5g