当前位置：首页 > news >正文

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

news 来源：原创 2024/9/19 4:19:26

引言

你好呀，我是小邹。

点击访问我的个人博客

在现代网页设计中，用户体验是至关重要的。一个流畅、直观且反应迅速的界面能够显著提升用户满意度。本文将介绍如何在网页表单中集成实时输入清除功能，即在输入框中显示一个“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';});});
});