Question

我已经看到这样做的例子，其中按钮是输入，但我似乎无法使用下面的示例，其中Input [type = button]被替换为Span / Icon。我无法在此处发布所有代码，但我希望这足以获得帮助。

我希望在用户点击文字字段之前禁用该范围：

＆＃13;

$(document).ready(function() {
    $('.header-search-btn').prop('disabled', true);
    $('input[type="text"].header-search').keyup(function() {
        if ($(this).val() != '') {
            $('.header-search-btn').prop('disabled', false);
        }
    });
});

＆＃13;

.fa-arrow-right::before {
    content: "\25B6";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn">
    <span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span>
</div>

＆＃13;

Answer 1

div上没有disabled属性。

但你可以简单地显示/隐藏箭头。

＆＃13;

$(document).ready(function() {
  $('.header-search-btn').hide();
  $('input[type="text"].header-search').keyup(function() {
    if ($(this).val() != '') {
      $('.header-search-btn').show();
    } else {
      $('.header-search-btn').hide();
    }
  });
});

＆＃13;

.fa-arrow-right::before {
  content: "\25B6";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn"> <span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span> </div>

＆＃13;

Answer 2

如果您想要span隐藏的UNTIL用户点击input字段，那么就可以执行此操作：

$(document).ready(function() {
    $('.header-search-btn').hide();
    $('input[type="text"].header-search').on("click", function() {

            $('.header-search-btn').show();
    });
});

.fa-arrow-right::before {
    content: "\25B6";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" class="header-search" placeholder="Search" id="searchInput">
<div class="header-search-btn">
    <span class="fa fa-arrow-right" aria-hidden="true" id="submitBtn"></span>
</div>

当按钮不是使用jQuery的INPUT时，禁用并启用搜索

2 个答案: