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

您实际上可以使用placeholder和reset按钮：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当您检查字段是否为空时，您只需要检查默认值。

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

如果任何文本输入不为空，则显示链接

2 个答案: