JSFiddle - React, Tailwind, and code Playground

propertychange event

by refhat

HTML

<span class="clearable">
    <input class="data_field" type="text" name="data_field" value="" />
    <span class="icon_clear">x</span>
</span>













<br /><br />
(test multiple inputs)
<br />

<span class="clearable">
    <input id="test" name="test" class="data_field" type="text" value="" />
    <span class="icon_clear">x</span>
</span>
<label for="test">Label test</label>

CSS

.clearable{
    position:relative;
}
.data_field{
    padding-right:17px; /* add space for the 'x' icon*/
}
span.icon_clear{
    position:absolute;
    right:10px;    
    display:none;
    
    /* now go with the styling */
    cursor:pointer;
    font: bold 1em sans-serif;
    color:#38468F;  
    }
    span.icon_clear:hover{
        color:#f52;
    }

JavaScript

$(document).on('propertychange keyup input paste', 'input.data_field', function(){
    var io = $(this).val().length ? 1 : 0 ;
    $(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
    $(this).delay(300).fadeTo(300,0).prev('input').val('');
});