Question

单击该输入时，会出现右侧的按钮。此按钮有onclick();个事件。问题是，这个事件没有启动，因为当你点击一个按钮时，它会消失（输入失去焦点），并且javascript没有被激活。我怎么能这样做，以便这个javascript将被执行？

Answer 1

在'按钮'上使用mousedown事件，因为点击过晚了。

$(document).on('mousedown', '.buttonIcon', function () {
   $(this).prev('input').val('');
});

<强> jsFiddle example

Answer 2

不要使用CSS焦点选择器隐藏/显示按钮，而是使用JavaScript的onBlur隐藏按钮。使用作为onBlur方法的第一个参数给出的事件对象，您可以检查“target”属性是否为按钮 - 如果是，则清除节点。或者，您可以在隐藏按钮之前使用低值（如50）的setTimout（），从而允许在隐藏按钮之前触发点击。

Answer 3

.buttonInput input:not(:focus) ~ .buttonIcon {
    display: none;
}

成为

.buttonInput .buttonIcon {
    display: none;
}

和

.buttonInput input:active ~ .buttonIcon {
    display: inline-block;
}

变为

.buttonInput .buttonIcon:active {
    display: inline-block;
}

这样按钮在你点击它之前不会消失。

http://jsfiddle.net/7uFVS/1/

Answer 4

我对你的jsfeedle做了一些改动。添加了一些ID和2个jquery函数

<div class="buttonInput">
    <input id="inputbox" type="text" placeholder="Status..."/> 
    <div id="clearBtn" class="buttonIcon" onclick="ClearInput(this);">BTN</div> 
</div>
<script>
    $('#inputbox').click(function(){
        $('.buttonIcon').css('display','block');
    });

    $('#clearBtn').click(function(){
        $('#inputbox').val(' ');
    });
</script>

http://jsfiddle.net/Qpd6V/

消失元素上的OnClick事件

4 个答案: