清除文本

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)显示或隐藏匹配的元素。

---

的DOM input事件时<input>或<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>