Question

我遇到了一个技术问题，即如果在输入框中输入空格，则会发出“不允许空格”的警告，但由于空格键也可用于解除警报，因此在键入时它会立即消失。因此，除非您按住空格键，否则警报会闪烁然后消失。任何人都可以弄清楚如何解决这个问题？感谢。

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

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

Answer 1

你可以试试这个：

在keydown

上显示提醒绑定document之前

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

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

我还建议使用一些通知插件，例如this，而不是显示提醒。

Answer 2

我建议使用不显眼的验证方法。这可以通过colorbox之类的东西轻松完成非常（尽管这仍然有点突兀 - 理想情况下甚至不会留下控件的焦点，如果可以！*），并且可以你喜欢简单或复杂，没有刺激用户的智慧结束和半死亡与古老的模态对话框。例如：

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

_{*我一直在看noty搜索我需要做的事情，我很想用它;在那之前，我不能保证，但可以提供类似的东西，你可以使用它来进行'内联验证'。}

Answer 3

您可以创建自己的模式，而不是使用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/

空格键解除警报

3 个答案: