首页 > 其他分享 >表单焦距失去弹出未填气泡提示框

表单焦距失去弹出未填气泡提示框

时间:2023-06-21 14:23:28浏览次数:32  
标签:bubble solid classList 焦距 表单 siblingBubble 提示框 border 255

html部分
									<div class="bubble show">
										<div class="arrow-down"></div>
	
										<p style="display: flex; align-items: center;"><svg t="1687242464305" class="icon"
												viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
												p-id="2231" width="32" height="32">
												<path
													d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z"
													p-id="2232" fill="#d81e06"></path>
												<path
													d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z"
													p-id="2233" fill="#d81e06"></path>
												<path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="2234"
													fill="#d81e06"></path>
											</svg>
											此问题必须填写</p>
									</div>
js部分
const inputs = document.querySelectorAll('.form-group input[type="text"]');
	const bubble = document.querySelector('.bubble')
	inputs.forEach(input => {
		input.addEventListener('blur', function() {
			const siblingBubble = this.parentNode.querySelector('.bubble');
			if (this.value === '') {
				if (!this.classList.contains('not')) {
					this.classList.add('invalid');

					if (siblingBubble) {
						siblingBubble.classList.remove('show');

					}
				}
			} else {
				this.classList.remove('invalid');

				if (siblingBubble) {
					siblingBubble.classList.add('show');

				}
			}
		});
	});
css部分

.bubble {
position: absolute;
background-color: rgb(255,255,255);
border-radius: 8px;

width: 260px;
height: 60px;
margin-left:54%;
box-shadow: 0 8px 12px 0 rgba(0,0,0,.12);
border: 2px solid rgba(0,0,0,.11);
border-radius: 12px;
font-weight: 500;
align-items: center;
  padding: 8px 20px;

  display: inline-flex;
  -webkit-box-align: center;
  font-size: 30px;
 

}
.show{
display: none;
}
.arrow-down {
position: absolute;
width: 0px;
height: 0px;
top: 70px;
left: 70%;
transform: translateX(-50%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(255, 255, 255);
}

标签:bubble,solid,classList,焦距,表单,siblingBubble,提示框,border,255
From: https://www.cnblogs.com/xxdmua/p/17496106.html

相关文章

  • 表单
    城市级联数据来源:外链应用:<template><el-form><el-form-item><el-inputplaceholder="市-区街道"v-model="address"[email protected]="clickAddress&qu......
  • 一文讲清楚表单制作工具的用处
    如果想要提升表格制作效率和质量,用什么样的工具可以实现这一目的?在低代码开发时代,应用在线表单制作工具可以给广大用户提升办公协作效率,摒弃传统表格效率低下、制作不灵活等劣势,实现高效率发展。针对广大用户朋友关心的话题,小编就表单制作工具的优点、作用等问题,给大家做一个详细......
  • (五)表单、表单控件
    一、表单 二、表单控件 ......
  • \b 代表单词字符的边界
    \b代表单词字符的边界,它本身不匹配任何字符。举个例子thisisanisland. 如果你使用is去字符串中匹配,正则表达式同时会匹配前面的“is”也会匹配后面“<is>land”中的is。但如果加入了\bis\b只有前面的is才会被匹配。因为is的前后都是空格,空格并不属于单词......
  • HTML form表单上传图片
    <formaction="/"method="post"enctype="multipart/form-data"><div><inputclass="layui-btn"type="file"multiple="multiple"accept="image/*"name="image&q......
  • CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器
    一、HTML5新特性概述HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1语义化标签(★★)以前布局,我们基本用div来做。di......
  • element表单校验
    通过一个案例来示意:element的表单校验html部分: <template><divid="app"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm">......
  • AntDesign自定义校验表单
    <a-rowclass="row":gutter="32"><a-col:span="16"><a-form-itemlabel="场景模板标签"name="tags"><a-......
  • 拖拽表单设计器有什么功能?
    在办公流程化盛行的当下,拖拽表单设计器也拥有广阔的市场前景。传统表单由于效率低、制作不灵活等缺陷,使得其在办公职场中使用频率越来越低。随着低代码技术平台的快速发展,可视化拖拽式设计器功能越来越完善,也得到了广大新老客户朋友的喜爱和支持。接下来,我们就一起来了解这种表单......
  • 如何使用默认提示框Alert
    如何使用默认提示框AlertAlert是JavaFX自带的一个窗口,提供了一些默认的样式供我们选择:提示框确认框错误框默认情况下,当打开一个Alert时,其他的窗口无法进行操作。我们还可以获取对Alert窗口操作的结果。效果展示示例代码importjava.util.Optional;importjav......