input框中添加一个 X(关闭/清空按钮)

要在输入框(<input> 元素)中添加一个 X(关闭/清空按钮),可以使用 CSS 和 JavaScript 实现。

HTML:

<div class="input-container"><input type="text" id="myInput" placeholder="请输入内容"><span class="close-btn" id="clearInput">X</span>
</div>

在上述代码中,我们创建了一个包含输入框和关闭按钮的容器。输入框使用了 <input> 元素,而关闭按钮是一个 <span> 元素,它的文本内容为 X 字符。

CSS:

.input-container {position: relative;
}.close-btn {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);cursor: pointer;font-size: 18px;color: #aaa;display: none; /* 初始状态隐藏 */
}.close-btn:hover {color: #000;
}

在上述代码中,我们将 .close-btn 样式设置为绝对定位,然后使用 right: 5px;top: 50%; 来分别设置关闭按钮距离右侧和垂直居中位置。使用 transform: translateY(-50%); 将其向上平移一半高度,以达到垂直居中的效果。在鼠标悬停时,可以将其颜色变为黑色。

JavaScript:

const inputEl = document.getElementById('myInput');
const clearBtnEl = document.getElementById('clearInput');inputEl.addEventListener('input', function() {if (inputEl.value.length > 0) {clearBtnEl.style.display = 'inline-block';} else {clearBtnEl.style.display = 'none';}
});clearBtnEl.addEventListener('click', function() {inputEl.value = '';clearBtnEl.style.display = 'none';
});

在上述代码中,我们获取了输入框和关闭按钮的 DOM 元素。然后使用 input 事件监听输入框的变化,在输入框中有内容时显示关闭按钮,否则隐藏。当关闭按钮被点击时,清空输入框的值并隐藏关闭按钮。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在VSCode中创建Java项目

在VSCode中创建Java项目 首先&#xff0c;保证安装了Java的JDK. WinR -> 输入cmd -> 输入 java -version -> 然后可以看到安装的JDK版本&#xff0c;如果没安装可以去找教程。 JDK安装参考教程 打开VSCode&#xff0c;打开扩展&#xff08;Ctrl Shift S&#xff…

linux驱动开发之常见面试问题

linux驱动开发之常见面试问题 新增驱动的基本操作寄存器基址怎么映射&#xff1f;probe里的常规操作。驱动中通常会定义一个私有结构体&#xff0c;里面包含一些内核结构体&#xff0c;但注册的时候只注册了某个成员&#xff0c;怎么找到这个私有结构体。什么是container_of 如…

vector基本用法(可变长数组)

一.初始化 1.vector<数据类型> 变量名&#xff1b; 2.vector<数据类型> 变量名&#xff08;n&#xff09;&#xff1b; 3.vector<数据类型> 变量名 &#xff08;n,x); 例子&#xff1a;1.vector<int> v;——> v[ ] (空的) 2.vector<…

FreeRTOS.chg脚本出现意外状态

PE代码生成的时候遇到这么个问题 警报如下 Description Resource Path Location Type ERROR: Unexpected status of script: Beans\FreeRTOS\FreeRTOS.chg, please contact Freescale support. M18_BMCU FreeRTOS Processor Expert Problem 意思就是这个脚本文件有问题&…

Linux第45步_通过搭建“DNS服务器”学习图形化配置工具

学习的意义&#xff1a;通过搭建“DNS服务器”&#xff0c;来学习“图形化配置工具”。“DNS服务器”&#xff0c;我们用不到&#xff0c;但为后期移植linux系统服务&#xff0c;因为在移植系统时&#xff0c;需要用到这个“图形化配置工具”。 1、“menuconfig图形化配置工具…

93 log4j-slf4j-impl 搭配上 log4j-to-slf4j 导致的 StackOverflow

前言 呵呵 最近想要 做一个 mongo 低版本的客户端读取高版本的服务端传递过来的数据造成的一个错误的时候, 出现了这样的问题 引入了 mongo-java-driver 之后, 使用相关 api 的时候会触发 com.mongo.internal.connection.BaseCluser 的初始化, 其依赖的 Loggers 间接的依赖…

C++构造和折构函数详解,超详细!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家龙年好呀&#xff0c;今天我们来学习一下C构造函数和折构函数。 文章目录 1.构造函数 1.1构造函数的概念 1.2构造函数的思想 1.3构造函数的特点 1.4构造函数的作用 1.5构造函数的操作 1.6构造函数…

2.11作业

运算符 1、选择题 1.1、若有以下程序 main() { char a1,b2; printf("%c,",b); printf("%d\n",b-a); } 程序运行后的输出结果是 C A&#xff09;3,2 B&#xff09;50,2 C&#xff09;2,2 D&#xff09;2,50 1.2、有以下程序 main() { int a,b…

从零开始学howtoheap:fastbins的house_of_spirit攻击2

how2heap是由shellphish团队制作的堆利用教程&#xff0c;介绍了多种堆利用技术&#xff0c;后续系列实验我们就通过这个教程来学习。环境可参见从零开始配置pwn环境&#xff1a;从零开始配置pwn环境&#xff1a;优化pwn虚拟机配置支持libc等指令-CSDN博客 1.fastbins的house_…

P1028 [NOIP2001 普及组] 数的计算题解

题目 给出正整数n&#xff0c;要求按如下方式构造数列&#xff1a; 只有一个数字n的数列是一个合法的数列。在一个合法的数列的末尾加入一个正整数&#xff0c;但是这个正整数不能超过该数列最后一项的一半&#xff0c;可以得到一个新的合法数列。 请你求出&#xff0c;一共…

提高效率!企业短信通道账单拆分一键处理,干货分享

**提高效率!企业短信通道账单拆分一键处理,干货分享! 昨天从硬盘里看到2019年写的 账单拆分案列,这里分享给大家 文章目录 **提高效率!企业短信通道账单拆分一键处理,干货分享!背景企业短信通道账单展示干货来了用python拆分短信账号最后短信通道账单拆分后的处理。最后…

C#,最大公共子序列(LCS,Longest Common Subsequences)的算法与源代码

1 最大公共子序列 最长的常见子序列问题是寻找两个给定字符串中存在的最长序列。 最大公共子序列算法&#xff0c;常用于犯罪鉴定、亲子鉴定等等的 DNA 比对。 1.1 子序列 让我们考虑一个序列S<s1&#xff0c;s2&#xff0c;s3&#xff0c;s4&#xff0c;…&#xff0c;…

常见性能优化策略

对于经常接触高并发服务的同学来学&#xff0c;会经常涉及到性能优化&#xff0c;但是由于平时很少总结&#xff0c;内容会比较分散&#xff0c;这里简单做一些总结 1&#xff1a;空间换时间 比如一些数据的访问需要很快返回结果&#xff0c;原本在磁盘上的数据&#xff0c;需…

算法------(11)并查集

例题&#xff1a; &#xff08;1&#xff09;Acwing 836.合并集合 并查集就是把每一个集合看成一棵树&#xff0c;记录每个节点的父节点。合并集合就是把一棵树变成另一棵树的子树&#xff0c;即把一棵树的父节点变为另一棵树的父节点的儿子。查询是否在同一集合就是看他们的根…

02.数据结构

一、单链表 作用&#xff1a;用于写邻接表&#xff1b; 邻接表作用&#xff1a;用于存储图或树&#xff1b; 1、用数组模拟单链表 #include<iostream> using namespace std;const int N 100010;// head 表示头结点的下标 // e[i] 表示结点i的值 // ne[i] 表示结点i的…

【OrangePi Zero2的系统移植】交叉编译工具链配置、wiringOP库、智能分类工程代码

一、交叉编译工具链配置 二、交叉编译wiringOP库 三、交叉编译智能分类工程代码 四、Makefile 用于编译 WiringPi 库 一、交叉编译工具链配置 1、关于编译 编译是指将源代码文件&#xff08;如C/C文件&#xff09;经过预处理、编译、汇编和链接等步骤&#xff0c;转换为可执…

开发JSP自定义标记

开发JSP自定义标记 您已经学习了如何用JavaBean处理JSP页面的业务逻辑。除此以外,您还可以用自定义标记处理JSP应用程序中反复出现的业务逻辑要求。 tag是程序中使用的执行重复性任务的可重用单元。例如, 是使主体文本在网页中间出现的HTML标记。JSP可用于创建于XML标记类似…

(c语言版)数组去重和排序 题目描述: 给定一个乱序的数组,删除所有的重复元素,使得每个元素只出现一次,并且按照出现的次数从高到低

【编程题目 | 100分】数组去重和排序 [ 100 / 中等 ] 数组去重和排序 题目描述&#xff1a; 给定一个乱序的数组&#xff0c;删除所有的重复元素&#xff0c;使得每个元素只出现一次&#xff0c;并且按照出现的次数从高到低进行排序&#xff0c;相同出现次数按照第一次出现顺序…

R语言【utlis】——alarm():提示音或提示符

Package utils version 4.2.0 Description 给用户一个声音或视觉信号。 Usage alarm() Details alarm()通过向控制台发送一个“\a”字符来工作。在大多数平台上&#xff0c;这将向用户发出铃声、嘟嘟声或其他信号(除非重定向了标准输出)。 它尝试刷新控制台(请参阅flush.co…

极限的唯一性推导

定义推导 根据函数的 y f ( x ) yf(x) yf(x)的定义,x∈集合A,y∈集合B,集合A对应B的关系是单射即一个x只能对应一个y。固 lim ⁡ x − > ∗ f ( x ) A \lim\limits_{x->*}f(x)A x−>∗lim​f(x)A存在,那么其极限必定唯一 反证法 函数 f ( x ) 存在极限 lim ⁡ x −…