javascript - Change form field color if the value has change -

javascript - Change form field color if the value has change -

i'm gettig bit lost javascript logic. have form 3 text fields. show default value through javascript (no placeholder). when form focused, value cleared , when form blurred, default value restored if field value hasn't been change.

i have write conditional logic ensure field text color changed gray (default placeholder value) black if value changed.

the 3 fields have different default value. tried write general script on blur check value of current field test against default value.

$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'))]); }); });

but test homecoming true placeholder value not restored when run test on blur.

what best way handle problem?

cheers

using jquery, this:

assuming next 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 , color on focus if( $(this).val() === $(this).data('placeholder') ){ $(this).val('').removeclass('placeholder'); } }).on("blur", function(){ // restore placeholder on blur if input empty if( $(this).val().length === 0 ){ $(this).val($(this).data('placeholder')).addclass('placeholder'); } });

css

input.placeholder{ color:#ccc; } input{ color:#000; }

fiddle: http://jsfiddle.net/uwpjc/

javascript jquery forms