1

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

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

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

3 回答 3

1

你可以试试这个：

在显示警报绑定keydown之前document

alert("email should not contain spaces")
$('document').keydown(function(event) {
        if (event.keyCode == 32) {
            event.preventDefault();
        }
    });

并在用户单击或输入您的输入时取消绑定。

我还建议使用像这样的一些通知插件而不是显示警报。

于 2013-03-22T16:34:36.943 回答
1

我建议使用不显眼的验证方法。这可以用colorbox 之类的东西很容易地完成（尽管这仍然有点突兀 - 如果可以的话，最好不要离开控件的焦点！*），并且可以像你喜欢的那样简单或复杂，而不会激怒用户用过时的模态对话框拼尽全力，半死不活。例如：

$.colorbox( html: '<p>Your message</p>', show: true );

* 我一直看到在搜索我需要做的事情时出现提示，我很想使用它；在那之前，我不能保证它，但可以提供它作为你可以用来提供“内联验证”的东西。

于 2013-03-22T16:36:40.013 回答
1

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

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

$('#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/

于 2013-03-22T16:39:44.943 回答