javascript - 空格键解除警报

Question

我有一个技术问题，如果在输入框中输入空格，它会提示“不允许有空格”，但是由于空格键也可用于关闭提示，因此它会在按键时立即消失。所以警报只是闪烁然后就消失了，除非你按住空格键。谁能弄清楚如何解决这个问题？谢谢。

$('#email').bind('DOMAttrModified textInput input change keypress paste',function(){  

   if($(this).val().match(/[\s]/g)) {
     alert("email should not contain spaces");
   } 
});   

Answer 1

您可以创建自己的模态，而不是使用 JavaScript 模态。您可以使用 jQuery UI 对话框，但这并不难做到。

此外，您绑定(bind)到所有这些不同类型的事件这一事实可能会导致其中一些事件不恰本地触发多次。您可以检查您是否已经在使用简单的数据标志警告用户。

$('#email').bind('DOMAttrModified textInput input change keypress paste', function (e) {
    var $this = $(this);
    if ($this.val().match(/[\s]/g) && !$this.data('spacedout')) {
        $this.data('spacedout', true);
        $("<div>").appendTo("body").css({
            position: 'fixed',
            width: '100%',
            height: '100%',
            backgroundColor: 'black',
            opacity: '0.7',
            top: 0,
            left: 0
        }).append($("<div style='color: red;'>Spaces not allowed<br><input type=submit value=OK></div>").on('click', function () {
            $this.data('spacedout', false).trigger('focus');
            $(this).parent().remove();
        }));
        $this.trigger('blur');
    }
});

http://jsfiddle.net/ExplosionPIlls/HwYdF/