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

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);
}
posted @ 2023-06-21 14:11  yjxQWQ  阅读(4)  评论(0编辑  收藏  举报