清晰的文本框不能正常工作

Question

我试图显示清晰的文本框是否有任何建议如何解决它

$(document).ready(function(){ 
 
    if($('.txt-input').val().length === 0){ 
 
    $('.erase').hide(); 
 
    } 
 
    else{ 
 
    $('.erase').show(); 
 
    }; 
 
    
 
    $(".erase").click(function(){ 
 
    $('.txt-input').val(''); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" class="txt-input"/> 
 
</form> 
 
<p class="erase">clear</p>

Answer 1

您需要创建一个监听器监听输入字段的变化。

$(document).ready(function(){ 
    $('.txt-input').on('keyup', function(){ 
    if($(this).val().length === 0){ 
     $('.erase').hide(); 
    }else{ 
     $('.erase').show(); 
    } 
    }); 

    $(".erase").click(function(){ 
    $('.txt-input').val(''); 
    }); 
});