javascript - 使用jquery添加值时如何检查输入框值是否为空

Question

我使用以下 jquery 为我的输入框添加值，

$('#btn').click(function(){
    $('#name').val('some text');
});

现在我需要检查并显示清除按钮是否已将文本添加到输入中。我尝试过以下代码。但需要点击输入框才能工作。

$('#name').blur(function(){
       if ($(this).val()) {
          $(".input-clear").show();
       }
       else {
          $(".input-clear").hide();
       }
    });
});

如果文本正确添加到输入框，如何显示按钮？

Answer 1

确保将代码放在 $(document).ready(function() { 中，其次使用 .input-clear 的 CSS 来最初隐藏按钮。并且然后根据显示/隐藏按钮检查是否输入了值并且不只是空白:

$('#name').on('input change', function() {
  var valueEntered = $(this).val();
  valueEntered.trim().length > 0 ? $(".input-clear").show() : $(".input-clear").hide();
});

$('#btn').on('click', function() {
  $('#name').val('some text').trigger('change');
});

.input-clear {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn'>Button</button>
<input type='text' id='name' />
<button class='input-clear'>Clear</button>