在不使用JS/jQuery的情况下让占位符消失,可以使用HTML和CSS来实现。以下是一种常见的方法:
示例代码如下:
<style>
.input-container {
position: relative;
display: inline-block;
}
.input-container input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
}
.input-container label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
transition: all 0.3s ease;
}
.input-container input:focus + label {
opacity: 0;
}
.input-container input:valid + label {
opacity: 0;
}
</style>
<div class="input-container">
<input type="text" id="myInput" required>
<label for="myInput">请输入内容</label>
</div>
这种方法通过CSS中的选择器和伪类来实现占位符的显示和隐藏,不需要使用JS/jQuery。当用户在输入框中输入内容或者输入框获得焦点时,占位符文本会消失。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云