Question

我有点迷失了一些javascript逻辑。我有一个包含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，因为当我在模糊上运行测试时，占位符值没有恢复。

处理此问题的最佳方法是什么？

干杯

Answer 1

使用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/

Answer 2

尝试使用此代码，您将获得您想要的内容

    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;
        }

如果值已更改，请更改表单字段颜色

2 个答案: