将数据输入到输入框中时显示清除按钮;当输入未聚焦且输入框中无数据时隐藏清除按钮

Question

我有以下代码http://jsbin.com/bebug/7/edit?html,css,js,output。如果我们输入输入，它将显示清除按钮。但是当输入不集中时，清除按钮应该消失。仅在输入集中且输入框中有值时才应显示

的HTML

<h1>Clear icon inside Input field</h1>
<input class="clearable" type="text" name="" value="" placeholder="Enter a Search term" /> 

的CSS

.clearable {
    background: #fff url(data:image/gif;
    base64, R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px;
    /* Use the same right padding (18) in jQ! */
    border-radius: 3px;
    transition: background 0.4s;
}
.clearable.x {
    background-position: right 5px center;
}
.clearable.onX {
    cursor: pointer;
}

JS

jQuery(function ($) {
    // CLEARABLE INPUT
    function tog(v) {
        return v ? 'addClass' : 'removeClass';
    }
    $(document).on('input', '.clearable', function () {
        $(this)[tog(this.value)]('x');
    }).on('mousemove', '.x', function (e) {
        $(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
    }).on('touchstart click', '.onX', function (ev) {
        ev.preventDefault();
        $(this).removeClass('x onX').val('').change();
    });
});

Answer 1

更改CSS

.clearable.x 

至

.clearable.x:focus