Question

在表单字段中，我希望4种字段状态有4种不同的颜色：空闲，焦点，有效和无效。
这个概念是为一个永不触摸的领域提供一种轻松的颜色，在输入字段后立即使用中性色，然后在用户输入时根据有效性获得良好/不良颜色。现在，2个有效颜色由CSS输入处理：required：invalid {..} ...
当田地仍然空着时，我不知道如何防止着色此外，如果我设置此功能：

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

输入时字段正确设置为白色（colorIdle），但无论实际有效性如何，它都会保持白色，就像HTML5检查丢失一样。我很困惑。

Answer 1

我认为这就是你想要做的事情：

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/

JQuery在多状态字段

1 个答案: