Показать связь, если какой-либо ввод текста не пуст

Question

Я бы хотел показать ссылку, когда пользователь начинает заполнять любые текстовые входы внутри div class="filters". Ссылка должна быть скрыта только в том случае, если все поля пусты или имеют значения по умолчанию, указанные в HTML.

Это код до сих пор:

<div class="filters"> 
    <input type="text" id="firstname_filter" value="Filter"> 
    <input type="text" id="lastname_filter" value="Filter"> 
    <input type="text" id="cellphone_filter" value="Filter"> 
    <a class="clear-filters" style="display:none;">Clear all filters</a> 
</div> 

init_vals = new Array(); 

//save default value of each input 
$("filters input").each(function (i) { 
    init_vals[i] = this.value; 
}); 

//clear default value on field focus 
$("filters input").focus(function() { 
    this.value = ""; 
}); 

//set default value on blur if field is empty 
$("filters input").blur(function (i) { 
    if (this.value == "") { 
     this.value = init_vals[$("filters input").index(this)]; 
    } 
}); 

//if any input is not blank, show the link 
$("filters input").bind('change keyup', function(el, index) { 
    if ($("filters input").map(function(idx, elem) { 
     if ($(elem).val() != "") return $(elem); 
    }).size() > 0) { 
     $(".clear-filters").show(); 
    } else { 
     $(".clear-filters").hide(); 
    } 
}); 

Когда я начинаю печатать в одном из текстовых входов, ссылка показывает вверх. Однако, когда я очищаю это же поле, ссылка не исчезает, потому что все остальные поля имеют значения по умолчанию. Любые советы о том, как игнорировать значения по умолчанию при проверке, являются ли поля пустыми?

спасибо.

Answer 1

Вам просто нужно проверить значение по умолчанию, когда вы проверяете, если поле пустым.

//if any input is not blank, show the link 
$(".filters input").bind('change keyup', function(el, index) { 
    if ($(".filters input").map(function(idx, elem) { 
    if ($(elem).val() != ""&& $(elem).val() != init_vals[idx]) // updated 
     return $(elem); 
    }).size() > 0) { 
    ... 

https://jsfiddle.net/daCrosby/pfLtz1p3/

Answer 2

Вы можете использовать placeholder и reset кнопки:

$(function() { 
 
    $("#reset").prop("disabled", true).click(function() { 
 
    setTimeout(function() { 
 
     $("#reset").prop("disabled", true); 
 
    }, 100); 
 
    }); 
 
    $("input").change(function() { 
 
    $("input").each(function() { 
 
     if ($(this).val().trim().length > 0) 
 
     $("#reset").prop("disabled", false); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form class="filters"> 
 
    <input type="text" id="firstname_filter" placeholder="Filter" /> 
 
    <input type="text" id="lastname_filter" placeholder="Filter" /> 
 
    <input type="text" id="cellphone_filter" placeholder="Filter" /> 
 
    <input type="reset" value="Clear All" id="reset" /> 
 
</form>