清除文本

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>