Question

我有一个包含大量输入的HTML表单，其中大部分都是可选的。我想根据它们的值将不同的CSS应用于输入，因为我认为这样可以更容易地查看已指定的字段。

例如，如果文本框实际输入了值，我希望它具有不同的背景/边框颜色。我不确定如何编写一个测试此选项的CSS选择器（也不会支持多少浏览器。）

同样我有一些单选按钮，其中一个选项是'none'，但是如果选择了任何其他选项，其标签文本应该是粗体。

理想情况下我会用CSS做这个，但如果它需要jQuery，那就没关系，特别是如果它能提供更好的crossbrowserness。

编辑这里有一些很好的答案 - 看起来JS就是这里的路径。通过阅读这些JS解决方案，我意识到CSS可以很好地解决一些要求：

表单可能会部分填充（编辑实体时），这意味着没有“更改”事件触发。
表单是动态的，因为可以添加新的文本框。

最后，我找到了以下答案的混合物，我将在此处包括以防其他人认为它有用：

var highlightInput = function () {
    var $this = $(this);
    if ($this.is(':text') || $this.is('textarea')) {
        $this.toggleClass('has-value', this.value.length > 0);
    } else if ($this.is(':radio') || $this.is(':checkbox')) {
        $this.parent().find('input[name="' + this.name + '"]').each(function () {
            var $label = $('label[for="' + this.id + '"]');
            var isSelected = this.checked && $label.text() != 'Unspecified';
            $label.toggleClass('selected-option', isSelected);
        });
    }
};

$('textarea, input:text').live('keyup', highlightInput)
                         .live('change', highlightInput)
                         .each(highlightInput);

$('input:radio, input:checkbox').live('change', highlightInput)
                                .each(highlightInput);

还有一些CSS，以疯狂的颜色作为占位符：

input[type=text].has-value, textarea.has-value { background-color:#0F0; }
label.selected-option { background-color:#0F0; }

Answer 1

这样的事情可以解决问题：

$('textarea, input:text').change(function() {
    var isEmpty = $(this).val() == '';
    $(this).toggleClass('empty', isEmpty);
});

如果您希望使用每个键击切换类，请使用keypress（）方法而不是change（）。

Answer 2

我认为你将不得不去jQuery - 联系ie。在文本框上“更改”事件，检查文本框的值并指定适当的css类。有点像：

$('input:text').change(function(){
   if($(this).val() == null)
       $(this).removeClass('has-value').addClass('no-value');
   else
       $(this).removeClass('no-value').addClass('has-value');
});

Answer 3

$('input').live('change',function(){
  if($(this).val !=false){
    $(this).addClass('completed');
  }else{
    $(this).removeClass('completed')
  }
});

Answer 4

你肯定需要JavaScript（jQuery，如果你愿意）来实现这一目标。这是一个让您入门的示例：

$('input.foo').keydown(function() {
    var $this = $(this);
    var modClass = 'modified';
    $this.toggleClass(modClass, $this.val());
});

写了那个盲人，所以我希望它有效。当嵌套if具有值并且具有类时，它就是那种情况。

澄清：我使用“keydown”是为了立即突出显示而不是输入失去焦点。这不适合您的收音机。尽管我不知道为什么在没有给出AJAX上下文时使用change()，以及Live（或使用上下文直播）更有效率，但请使用Delegate。

Answer 5

http://jsfiddle.net/NaAEB/

$('input').change(function(){
    if($(this).val() !== ""){
       $(this).addClass('hasVal');
    }else{
       $(this).removeClass('hasVal');
    } 
});

$('select').change(function(){
    if($(this).val() !== "none"){
       $(this).addClass('hasVal');
    }else{
       $(this).removeClass('hasVal');
    } 
});

Answer 6

认为你将不得不与jquery一起使用这个。试试out this fiddle

javascript看起来像这样：

$('form :input').change(function(){
    var $this = $(this);
    if($this.is(':text')) 
        $this.toggleClass('highlight', this.value.length > 0);

    if($this.is(':radio')) { // update all radios in group
        $this.parent().find('input[name="' + this.name + '"]').each(function(){
            $('label[for="' + this.id +'"]').toggleClass('bold', this.checked);
        });
    }
});

使用CSS或jQuery根据其值对HTML输入进行不同的样式设置

6 个答案: