Question

我有一个动态创建的输入列表。我希望他们是：

1）如果需要并且为空，则为红色 2）如果不是必需但是空的则为黄色 3）如果它们包含值，则为绿色。

我试过了：

<style>
.empty {
    background: yellow;
    }
.not-empty {
    background: green;}
input:invalid { 
    background: red;
    }
</style>
<script>
jQuery('input').blur(function(){
    tmpval = jQuery('input').val();
    if(tmpval == '') {
        jQuery('input').addClass('empty');
        jQuery('input').removeClass('not-empty');
    } else {
        jQuery('input').addClass('not-empty');
        jQuery('input').removeClass('empty');
    }
});
</script>

Answer 1

非常简单，有点冗长的例子让你看到发生了什么。 .trigger()设置初始值。还添加了一些动态输入。

＆＃13;

jQuery('.myinputs').on('change','input.pretty', function() {
  let tmpval = $(this).val();
  let hasNoValue = tmpval == '';
  let isRequired = $(this).prop('required');
  $(this).toggleClass('empty', hasNoValue);
  $(this).toggleClass('not-empty', !hasNoValue);
  $(this).toggleClass('invalid', hasNoValue && isRequired);
})
$('.myinputs').append('<input class="pretty" type="text" />').append('<input class="pretty" type="text" required="true" />').append('<input class="pretty" type="text" required="true" value="dynamic" />');
$('input.pretty').trigger('change');

＆＃13;

.empty {
  background-color: yellow;
}

.not-empty {
  background-color: #99FF99;
}

.invalid {
  background-color: #FF9999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myinputs">
<input class="pretty" type="text" />
<input class="pretty" type="text" />
<input class="pretty" type="text" required="true" />
<input class="pretty" type="text" required="true" />
<input class="pretty" type="text" value="howdy" />
<input class="pretty" type="text" />
</div>

＆＃13;

Answer 2

你可以使用普通的css。但是，使用此功能无法检测用户输入的值，但this answer应该会对您有所帮助。

input[required] {
  background: red;
}

input {
  background: yellow;
}

input[value] {
  background: green;
}

<input type="text" required>
<input type="text">
<input type="text" value="text">

Answer 3

使用事件处理程序.change()监视输入值，然后在.each()中添加条件，以便在一个输入中按下按钮后将其应用于所有输入

  function checkChanges(){
    $("input").each(function(){
      if($(this).prop('required') && !$(this).val()){
      $(this).addClass('red');
    }
    else{
      $(this).removeClass('red');
    }
    
    if(!$(this).prop('required') && !$(this).val()){
      $(this).addClass('yellow');
    }
    else{
      $(this).removeClass('yellow');
    }
    
    if($(this).val()){
      $(this).addClass('green');
    }
    else
    {
      $(this).removeClass('green');
    }
    });
  }

  $("input").on('change',function(){
     checkChanges();
  });
  
  $(".create").on('click',function(){
    var str = "<input type='text'  class = 'inp' required='required' " + "onchange = 'checkChanges()'><input type='text' class = 'inp' " +
    "onchange = 'checkChanges()> " +
      "<input type='text' class = 'inp' onchange = 'checkChanges()>";
      
      $(".holder").append(str);
  });

input.red {
  background: red;
}

input.yellow {
  background: yellow;
}

input.green {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'holder'>
<input type="text"  class = 'inp' required='required'>
<input type="text" class = 'inp' >
<input type="text" class = 'inp'>

</div>
<br>
1) red if they are required and empty.<br>
2) yellow if they are not required but empty.<br>
3) green if they contain a value.

<button class = 'create'>GENERATE INPUTS</button>

Javascript样式空输入框

3 个答案: