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来隐藏最初的按钮。然后根据show/hide按钮：

检查是否输入了值并且不是空白

＆＃13;

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

＆＃13;

.input-clear {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

您可以添加一个更改事件，只要用户更改了输入，就会调用该事件。要在以编程方式更改输入时触发此操作，只需在更新输入后调用change。

$('#btn').click(function(){
    $('#name').val('some text').change();
});

$('#name').change(function () {
  if ($(this).val().length) {
    $('.clear').show();
  } else {
    $('.clear').hide();
  }
});

$('.clear').click(function () {
  $('#name').val('').change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name"></input>
<button style="display: none;" class="clear">Clear</button>
<br/>
<button id="btn">Click</button>

Answer 3

您可以使用解决方案https://jsfiddle.net/w6ugt7cy/

$('#btn').click(function(){
  $('#name').val('some text');
  $('button.clear').show();
});

$('button.clear').click(function(){
  $(this).hide();
  $('#name').val('');
});

$('#name').keyup(function(){
  if($(this).val().trim() === ''){
    $('button.clear').hide();
  } else {
    $('button.clear').show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button style="display: none;" class="clear">Clear</button>
<br/>
<button id="btn">Click</button>

希望这会对你有所帮助。

使用jquery

3 个答案: