回答
確實嘗試了使用焦點,但是,只要存在內容,我就希望背景顏色保持不變,並在沒有內容時消失。 – ccmanz
把你的代碼放在jsfiddle中 –
這裏是純JavaScript的解決方案
var input = document.getElementById("test");
input.addEventListener('input', function() {
if (input.value)
input.style.backgroundColor = '#90EE90';
else
input.style.backgroundColor = '#fff';
});
<input id="test" type="text" value="">
添加CSS類像
.myCSSClass
{
background-color:red;
}
現在使用的模糊功能的jQuery添加此類
$("#myTextBox").on('blur',function(){
if($("#myTextBox").val()==""){
if($("#myTextBox").hasClass("myCSSClass")){
$("#myTextBox").removeClass("myCSSClass");
}
}
else
{
$("#myTextBox").addClass("myCSSClass")
}
});
有幾種方法可以實現此目的。您可以通過添加required
attribute來強制執行input
。這樣做意味着,一旦用戶輸入任何東西進入該領域,它現在處於有效狀態,您可以使用:valid
pseudo-class在你的CSS目標是:
input:valid{
background:#ff9;
}
<input required>
或者,如果你不想讓這個字段成爲強制性的,正如其他人所建議的那樣,當字段獲得焦點時,你可以設置新的background-color
。爲了防止它在失去焦點時恢復到初始顏色,您需要在background
中添加transition
,並在input
處於正常狀態時將transition-delay
設置爲可笑的高數,並在聚焦時將其重置爲0s
。顯然,不管用戶是否真的在場中輸入任何東西,都會發生這種變化。
input{
transition-delay:9999s;
transition-property:background;
}
input:focus{
background:#ff9;
transition-delay:0s;
}
<input>
如果沒有這些選項滿足您的需求,那麼你可能需要訴諸使用JavaScript來添加或刪除類,取決於input
的value
是否爲空。
document.querySelector("input").addEventListener("input",function(){
this.value?this.classList.add("filled"):this.classList.remove("filled");
},0);
.filled{
background:#ff9;
}
<input>
- 1. 設置背景圖像後設置背景顏色
- 2. 在字段中輸入文本改變div的背景顏色
- 3. 當在輸入中輸入X秒後改變背景顏色
- 4. ttk輸入背景顏色
- 5. 輸入文字背景顏色設置爲黃色,僅在鉻色
- 6. 如何在UIScrollView的內容區設置背景顏色?
- 7. 設置背景顏色2
- 8. 設置背景顏色
- 9. Angular4背景顏色設置
- 10. 設置背景顏色[JAVA]
- 11. angular2設置背景顏色
- 12. 設置背景顏色
- 13. 設置背景顏色
- 14. 設置背景顏色:Android
- 15. Cardview設置背景顏色
- 16. 設置背景顏色toolbaritems
- 17. 設置VIM背景顏色
- 18. 設置背景顏色CMDIFrameWnd
- 19. 設置行背景顏色
- 20. 背景顏色不添加
- 21. Xamarin - 輸入文本後如何更改輸入字段的背景顏色?
- 22. 將所有文本框(輸入字段)的背景顏色設置爲透明
- 23. 僅爲輸入字段設置背景顏色選擇選項列表
- 24. 在DataGridComboxColumn中設置背景顏色
- 25. 在jQuery中設置背景顏色?
- 26. 在qt中設置背景顏色
- 27. 在設置中更改背景顏色
- 28. JavaFX:在TextFlow中設置背景顏色
- 29. 未在Java中設置背景顏色
- 30. 在scrollpane中設置背景顏色
嘗試使用'輸入:focus'在CSS –
我曾嘗試使用但焦點,我希望背景顏色留只要有內容存在,並且時有沒有消失。 – ccmanz
把你的代碼放在jsfiddle中 –