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

Posted 2023-05-09

【中文标题】Jquery 脚本在表单填充中阻止键盘输入

【英文标题】：Jquery Script Blocking Keyboard Input in Form Fill

【发布时间】：2021-07-14 14:25:43

【问题描述】：

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

$(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);  
    
));

【参考方案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);
);