如果值有变化，则更改表格字段颜色

我用一些javascript逻辑gettig有点丢失。我有一个3个文本字段的表单。它们通过javascript（无占位符）显示默认值。当表格被聚焦时，该值被清除，当表格模糊时，如果字段值没有被改变，默认值被恢复。如果值有变化，则更改表格字段颜色

我必须编写一些条件逻辑，以确保如果值更改，字段文本颜色从灰色（默认占位符值）更改为黑色。

3个字段具有不同的默认值。我试图在Blur上编写一个通用脚本来检查当前字段的值，以对照默认值进行测试。

$fields = $('#webform-component-group-1 .webform-component-watermarked'); 
    var keys = []; 
    var values = []; 
    console.log($fields.length); 
    $fields.each(function(){ 
    keys.push($(this).attr('id')); 
    values.push($(this).val()); 
    $(this).blur(function(){ 
     console.log($(this).val()); 
     console.log($(this).val() !== values[keys.indexOf($(this).attr('id'))]); 
    }); 
    });

但我的测试总是返回true，因为当我在模糊上运行测试时，占位符值没有恢复。

什么是解决这个问题的最好方法？

干杯

来源

2013-02-18 Yannick Schall

我可以问你为什么不使用占位符？ – 2013-02-18 12:36:31

使用jQuery，你可以做这样的：

假设下面的HTML

<div id='fields'> 
    <input value='start1' class='placeholder' /> 
    <input value='start2' class='placeholder' /> 
</div>

JavaScript

$('#fields input').each(function(){ 
    // Save initial placeholder values 
    $(this).data('placeholder', $(this).val()); 
}).on("focus", function(){ 
    // Remove placeholder value and color on focus 
    if($(this).val() === $(this).data('placeholder')){ 
     $(this).val('').removeClass('placeholder'); 
    } 
}).on("blur", function(){ 
    // Restore placeholder on blur if input is empty 
    if($(this).val().length === 0){ 
     $(this).val($(this).data('placeholder')).addClass('placeholder'); 
    } 
});

CSS

input.placeholder{ 
    color:#ccc; 
} 

input{ 
    color:#000; 
}

小提琴：http://jsfiddle.net/uWPJC/

来源

2013-02-18 12:43:51

那就是票。不幸的是我正在处理不使用占位符属性的表单。有一个自定义脚本，用于检查默认值是否已更改为模拟占位符行为。所以当字段集中时，字段的值只有0。我必须检查字段的新值，但是当我检查模糊时，值仍然为0. – 2013-02-18 13:06:59

实际上，我在此处并未使用占位符属性。只需将初始值存储在'data- *'属性中（通过jQuery函数），并使用名为placeholder的CSS类来表示“占位符”文本处于活动状态。我只用了'placeholder'这个名字。在模糊处检查长度是否为0的情况下，您还可以检查文本是否与'data-placeholder'属性相同。 – 2013-02-19 03:45:05

对不起，我评论太快了。我有问题，所以排除了existig脚本模拟占位符的事情。我已经尝试过你的技术，但只要我选中，字段文本变暗，即使值没有改变。另一个问题是我无法访问标记。一件非常麻烦的事情。到目前为止，我无法让它工作。感谢您的帮助:) – 2013-02-19 12:10:48

尝试使用此代码玩，你会得到什么ü寻找

var pass1 = document.getElementById('password'); 
    var pass2 = document.getElementById('vpass'); 
    var message = document.getElementById('confirmMessage'); 
    var goodColor = "#66cc66"; 
    var badColor = "#ff6666"; 
     if(pass1.value == pass2.value){ 
       pass2.style.backgroundColor = goodColor; 
     } 
     else{ 
       pass2.style.backgroundColor = badColor; 
     }

来源

2013-02-18 12:37:56 EnterJQ

如果值有变化，则更改表格字段颜色

回答

相关问题