在輸入字段中設置內容後添加背景顏色

在輸入字段中放置內容後，我是否可以添加背景顏色？就像自動完成工作時發生的情況一樣。在輸入字段中設置內容後添加背景顏色

謝謝！

來源

2016-07-29 ccmanz

嘗試使用'輸入：focus'在CSS –

我曾嘗試使用但焦點，我希望背景顏色留只要有內容存在，並且時有沒有消失。 – ccmanz

把你的代碼放在jsfiddle中 –

的Html

3210

的CSS

input:focus { 
     background-color: yellow; 
    }

Demo in JsFiddle

來源

2016-07-29 08:52:59

確實嘗試了使用焦點，但是，只要存在內容，我就希望背景顏色保持不變，並在沒有內容時消失。 – ccmanz

把你的代碼放在jsfiddle中 –

使用jQuery的，

$("#target").blur(function() { 
    $("#target").css('background-color','red'); 
});

DEMO

來源

2016-07-29 08:54:31 Naga

這裏是純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="">

來源

2016-07-29 09:00:38

添加CSS類像

.myCSSClass 
{ 
background-color:red; 
}

現在使用的模糊功能的jQuery添加此類

$("#myTextBox").on('blur',function(){ 
if($("#myTextBox").val()==""){ 
    if($("#myTextBox").hasClass("myCSSClass")){ 
    $("#myTextBox").removeClass("myCSSClass"); 
    } 
} 
else 
{ 
$("#myTextBox").addClass("myCSSClass") 
} 
});

來源

2016-07-29 09:03:54

有幾種方法可以實現此目的。您可以通過添加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>

來源

2016-07-29 16:12:54 Shaggy

在輸入字段中設置內容後添加背景顏色

回答

相關問題