Jquery 脚本在表单填充中阻止键盘输入

Question

之前，我在我正在处理的项目中测试在线表单，发现我实际上无法在任何表单字段中输入任何内容。我把它缩小到一个特定的脚本。而且我认为是代码中的这一点导致了问题，因为当我删除它时，我可以再次输入。

$(document).on('keypress', handleEvent);  

但是对于我的生活，我不知道为什么会发生，我不知道如何去解决它。如有任何帮助指出问题所在以及如何解决此问题，我们将不胜感激。

    jQuery(document).ready(function($) {
        function handleEvent(e){
            var id = null;          
            var fade_out;
            var fade_in;
        
            if (e.type === 'click'){
                id = $(this).attr("id");
            }else{
                id = e.which;
            }
            
            switch (id){
                case 13:
                if ($('#click_1').is(':visible')){
                    fade_out = '#start_1';
                    fade_in  = '#step_0';
                }
                break;              
                ..etc..
                default:
                break;
            }   
            $(fade_out).fadeTo( 'fast', 0 );
            $(fade_in).delay( 800 )..fadeTo( 'slow', 1 );
            e.preventDefault();
        }
    $('#ts_container').on('click', 'button, a', handleEvent);
    $(document).on('keypress', handleEvent);  
    });

更新

我想出了一个办法来解决它。但是，仍然不知道为什么会这样。

替换：

$(document).on('keypress', handleEvent); 

与：

if ($(document).keydown(function(e){            
    if ($('#service_form').is(':hidden')){
        $(document).on('keyup', handleEvent);  
    }
}));

Answer 1

即使在第一次修改代码之后，我也意识到这不仅会阻止表单填写，还会阻止其他所有内容。在最初临时修复它之后，我发现不仅按键被阻止，而且未分配的按钮和锚点也是如此。我需要一种方法来打开和关闭那段代码。我在这里遇到了 BenG 从 2015 年开始提供的解决方案：JQuery: Disable click event。

通过他的代码和对现有代码的一些修改，下面的代码解决了未分配的点击和键盘输入被拒绝的问题。

改变了这个：

         //any unassigned clicks / buttons would not work with this code.
         $('#ts_container').on('click', 'button, a', handleEvent);

         // any unassigned keypress events would not work with this code.
         $(document).on('keypress', handleEvent);  

到这里：

jQuery(document).ready(function($) {

    $.fn.disableClick = function (disable){
        this.each(function() {
            if(disable){
                if(this.onclick)
                $(this).data('onclick', this.onclick).removeAttr('onclick');
                if($._data(this, 'events') && $._data(this, 'events').click)
                $(this).data('click', $.extend(true, {}, $._data(this, 'events').click)).off('click');
            }
            else{
                if($(this).data('onclick'))
                this.onclick = $(this).data('onclick');
                if($(this).data('click'))
                for(var i in $(this).data('click'))
                $(this).on('click', $(this).data('click')[i].handler);
            }
        });
        return this;
    };

    function handleEvent(e){
        var id = null;          
        var fade_out;
        var fade_in;
    
        if (e.type === 'click'){
            id = $(this).attr("id");
        }else{
            id = e.which;
        }
        
        switch (id){
            case 13:
            if ($('#click_1').is(':visible')){
                fade_out = '#start_1';
                fade_in  = '#step_0';
            }
            break;              
            ..etc..
            default:
            break;
        }   

        if($('#service_form').is(':visible')){
            $('#ts_container').disableClick(false);
            document.removeEventListener('keydown', handleEvent);
        }           
        e.preventDefault();         
    }
    
    $('#ts_container').on('click', 'button, a', handleEvent);
    document.addEventListener('keydown', handleEvent);
        
    function resetListeners(){
        $('#ts_container').disableClick(true);
        document.addEventListener('keydown', handleEvent);
    }
    
    $('#wpforms-submit-531').on('click', resetListeners);
});