代码之家 › 专栏 › 技术社区 › Mikko Kirkanen

时钟选择器:如何防止点击输入打开时钟选择器

clock html jquery

Mikko Kirkanen · 技术社区 · 8 年前

我正在使用 weareoutman's clockpicker 在我的页面上。如何防止点击输入以显示时钟选择器或在时钟选择器可见之前淡入覆盖?我只是想在时钟选择器显示之前淡入覆盖。点击“按钮”可按要求工作。到目前为止,我已经尝试了时钟选择器中的beforeShow函数以及jQuery中的e.preventDefault()和e.stopPropagation()函数。

HTML:

<div class="dialog">
    <div>Clock:</div>
    <div class="input-group" id="clockpicker">
        <input type="text" id="start-time" class="clock text-right" readonly />
        <span class="button button-gray icon icon-clock"></span>
    </div>
<div class="dialog-overlay hide"></div>
</div>

jQuery:

var clock = jQuery('#clockpicker'),
    dialog_overlay = jQuery('.dialog-overlay');

clock.clockpicker({
    autoclose: true,
    afterDone: function() {
        dialog_overlay.fadeOut('slow');
    }
});

clock.on('click', function(e) {
    dialog_overlay.fadeIn('slow', function() {
        clock.clockpicker('show');
    });
});

2 回复 | 直到 8 年前

Mikko Kirkanen 8 年前

我找到了解决这个问题的办法。在输入字段中禁用单击事件。

clock.find('input').off('focus.clockpicker click.clockpicker');

我希望这个解决方案也能帮助其他人。

Dani 7 年前

使用最新版本的库,您可以执行以下操作:

$('#inputId').clockpicker({
        beforeShow: function e() {            
            var condition = "...";
            if (!condition) {
                e.stopPropagation();
            }
        }            
    });

推荐文章

Softly · 单选按钮未按预期取值

1 年前