我希望當用戶來并嘗試在“textarea”中輸入文本時，標簽會上升，如果他們將該區域留空，它會回到原始位置。如果用戶在那里輸入了一些東西，它將停留在那里。
我用輸入框嘗試了這段代碼，它作業正常，但是當我嘗試使用 textarea 執行此操作并在文本區域中添加一些輸入時，標簽回傳下來，它需要保持在那里。
textarea:focus~.floating-label,
input:not(:focus):valid~.floating-label {
top: -40px;
bottom: 10px;
left: 10px;
font-size: 25px;
opacity: 1;
color: rgb(100, 6, 6);
}
.scheme-des textarea {
width: 90%;
height: 50vh;
resize: none;
padding: 10px 20px 0 20px;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float {
position: relative;
margin-bottom: 30px;
}<div class="form-float scheme-des">
<textarea name="" class="inputText" id="" cols="30" rows="10"></textarea>
<label class="floating-label">Description of scheme</label>
</div>uj5u.com熱心網友回復：
您可以添加一個空白占位符，然后將textarea:not(:placeholder-shown)~.floating-label選擇器添加到您的第一個 CSS 規則。
這是這樣做之后的結果：
textarea:focus~.floating-label,
textarea:not(:placeholder-shown)~.floating-label,
input:not(:focus):valid~.floating-label {
top: -40px;
bottom: 10px;
left: 10px;
font-size: 25px;
opacity: 1;
color: rgb(100, 6, 6);
}
.scheme-des textarea {
width: 90%;
height: 50vh;
resize: none;
padding: 10px 20px 0 20px;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float {
position: relative;
margin-bottom: 30px;
}<div class="form-float scheme-des">
<textarea name="" class="inputText" id="" cols="30" rows="10" placeholder=" "></textarea>
<label class="floating-label">Description of scheme</label>
</div>uj5u.com熱心網友回復：
使用 javascript 事件處理程式onFocus并onBlur
添加和洗掉類
let texterea = document.getElementsByClassName('inputText');
texterea[0].addEventListener("blur", myScript);
texterea[0].addEventListener("focus", myScript1);
function myScript(){
if(texterea[0].value == ''){
texterea[0].classList.remove("textArea");
}else{
texterea[0].classList.add("textArea");
}
}
function myScript1(){
if(texterea[0].value == ''){
texterea[0].classList.add("textArea");
}
}.textArea ~ .floating-label {
top: -40px;
bottom: 10px;
left: 10px;
font-size: 25px;
opacity: 1;
color: rgb(100, 6, 6);
}
.scheme-des textarea {
width: 90%;
height: 50vh;
resize: none;
padding: 10px 20px 0 20px;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float {
position: relative;
margin-bottom: 30px;
}<div class="form-float scheme-des">
<textarea name="" class="inputText" id="" cols="30" rows="10"></textarea>
<label class="floating-label">Description of scheme</label>
</div>你在尋找類似的東西嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447911.html