Question

我有一个带有文本框和按钮的表单，如下所示：

   <input name="search" type="text" />
   <button class="close" id="markclick" style="position:absolute"></button>

<script>
$('#markclick').click(function()
{

 $('.name').val('');
}
</script>

当我点击按钮时，它正在清除文本框，但有一点是，如何在文本框中键入文本时才启用按钮？有什么输入？

Answer 1

即使用户在输入框中粘贴文本，这也应该有用。

Link to fiddle

$(document).ready(function() {
  $('#searchBox').on("change keyup paste", function() {
    $('.close').toggle($('#searchBox').val() != '');
  });

  $('#markClick').click(function() {
    $('#searchBox').val('').trigger('change');
  });
})

.close {
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="searchBox" name="search" type="text" />
<button class="close" id="markClick">X</button>

Answer 2

$('[name=search]').on('keyup',function(){
    ($('[name=search]').val().trim().length == 0 )? 
    $('#markclick').attr('disabled','disabled') :
    $('#markclick').removeAttr('disabled');
}).trigger('keyup');


$('#markclick').on('click',function(){
    $('[name=search]').val('').trigger('keyup');
});

https://jsfiddle.net/p666ncoe/1/

Answer 3

使用.toggle来播放元素和display事件的input属性，以处理输入值的更改。

.toggle(Boolean)显示或隐藏匹配的元素。

当input或<input>元素的值发生变化时，会同步触发DOM <textarea>事件。[Ref]

注意： button最初应为display:none。或使用.trigger('input')来调用input处理程序。

$('[name="search"]').on('input', function() {
  $('#markclick').toggle(!!this.value); //return true if value!=''
});
$('#markclick').on('click', function() {
  $('[name="search"]').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input name="search" type="text" />
<br>
<button class="close" id="markclick" style="position:absolute;display:none">Clear</button>

关闭按钮清除文本

3 个答案: