JQuery設置多態字段的背景顏色

在表單字段中，我希望對於4個字段狀態有4種不同的顏色：空閒，聚焦，有效和無效。
這個概念是爲一個從未接觸過的領域提供一種令人放鬆的顏色，一旦輸入字段，顏色就會變成中性顏色，然後在用戶打字時根據有效性選擇一種好的/不合適的顏色。
現在，2種有效性顏色由CSS處理並輸入：required：invalid {..} ...
我不知道如何在字段仍爲空時防止着色。
此外，如果我設置此功能：JQuery設置多態字段的背景顏色

$('.fieldBack').on('focus', function() { 
    this.style.background=colorIdle; 
});

領域正確設置爲白色（colorIdle）輸入的時候，但後來它保持白色不管實際有效性，彷彿HTML5檢查丟失。我很困惑。

來源

2016-12-07 Orionis

你能提供一個工作的例子嗎？ jsfiddle/snippet/codepen – Dekel

我想這是你想要做什麼：

Demo

的Javascript

var colorIdle = 'lightblue'; 
var colorFocus = 'lightgreen'; 
var colorFilled = 'green'; 
$("input").focusin(function() { 
    $(this).css('background-color', colorFocus) 
}); 

$("input").focusout(function() { 
    if($(this).val() != '') { 
    $(this).css('background-color', colorFilled) 
    } else { 
    $(this).css('background-color', colorIdle) 
    } 
});

HTML

<form id="formPro" action=""> 
    Required input <input type="text" required> <br/> 
    Normal input <input type="text"> 
    <button type="submit">Submit</button> 
</form>

CSS

input { 
    background-color: lightblue; 
}

https://jsfiddle.net/qLnrcdod/5/

來源

2016-12-07 14:30:19 Troyer

這是我需要的一部分。它缺少HTML5驗證（我使用'required'和'pattern'）。我已經做了類似的事情，但是當用戶輸入字段（'focus'）並輸入時，與HTML5有效/無效相關的顏色不再顯示。換句話說，你的'colorFilled'應該被CSS中定義的'colorValid'或'colorInvalid'取代並由HTML5選擇。在此期間，我正在測試CSS'input.focus.required.valid ..'solution @ Dekel不幸的是，我不知道並使用Fiddle（我應該學習它！）來展示我得到的東西。 – Orionis

@Oionion你可以使用'input：valid'和'input：invalid'屬性來玩，然後我會爲你製作另一個解決方案:) – Troyer

@Orionis https://jsfiddle.net/qLnrcdod/8/ – Troyer

JQuery設置多態字段的背景顏色

回答

相關問題