我將如何實作在此 Google 登錄表單上看到的 onclick 影片？
當您單擊按鈕框時，占位符文本會縮小并移動到左上角，并且在文本周圍形成按鈕邊框。
uj5u.com熱心網友回復：
那不是占位符。它只是一個絕對位于輸入欄位上方的標簽。有 2 個選項。
第一個只有html和css。但它僅在需要所有輸入欄位時才有效。因此，如果公式為空，則無法發送公式。
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
#input:focus ~ .your-label,
#input:valid ~ .your-label {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" required />
<label class="your-label" for="input">Your Text</label>
</div>
</body>
第二個是 js，你也可以發送空的表單。
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
.your-label.active {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" />
<label class="your-label" for="input">Yourt Text</label>
</div>
</body>
<script>
const form_input = document.querySelectorAll("#input");
form_input.forEach((e) => {
e.addEventListener("focus", () => {
e.nextElementSibling.classList.add("active");
});
e.addEventListener("blur", () => {
if (e.value === "") {
e.nextElementSibling.classList.remove("active");
} else {
e.nextElementSibling.classList.add("active");
}
});
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530748.html
上一篇：顯示彈性中斷布局的百分比高度
下一篇：塊元素中的文本溢位