在jsf组件中按下回车键时限制Ajax机制

Posted 2023-02-19

【中文标题】在jsf组件中按下回车键时限制Ajax机制

【英文标题】：Restrict Ajax Mechanism while enter key is pressed in jsf component

【发布时间】：2017-11-21 07:31:05

【问题描述】：

这里是捕获和禁用回车键的选择器

$(".disableEnterKey").keydown(function(event) 

    var charCode = event.charCode || event.keyCode || event.which;
    if (charCode === 13) 

        event.preventDefault();

        return false;
    
);

禁用primefaces-timepicker输入字段的回车键

    <pe:timePicker id="startTime"
    value="#xxx.xxx.var"
     mode="popup" startHours="0" endHours="23"
     showPeriod="true" widgetVar="startTimeWidget" 
     styleClass="form-control keyDownFalse disableEnterKey" >
        <p:ajax event="timeSelect" partialSubmit="false"
        listener="#xxx.var"
        update="endTime, duration" 
        oncomplete="keyDownFalse()"/>
    </pe:timePicker>

但这里的问题是 ajax 标签下的 update 属性。即，一旦触发开始时间选择器事件，我将更新结束时间选择器。但它应该只在从开始时间选择器中选择小时和分钟而不是按 enter 键时触发。

一旦在开始时间按下回车键，结束时间就会更新。

所以请建议我在按 Enter 时限制 ajax 机制的确切方法是什么。提前致谢。

【问题讨论】：

您在 oncomplete 中没有返回任何内容...您应该... ***.com/questions/34354839/… 是重复的吗？

@Kukeltje，我认为return 不会影响任何更改。即 oncomplete="return keyDownFalse()"。

我也试过了。但对我的用例没有影响。

在 ajax 请求结束时会触发 oncomplete... 确定需要吗？但现在我想起来了（你确实需要'return'），你不能阻止来自ajax 调用本身的ajax 调用。您需要在 timePicker 上首先阻止调用。白天让我看看我是否能找到“某种”重复

【参考方案1】：

这种行为的根源实际上是设计使然， 在 enter 键上，原始 jQuery 插件 fgtimepicker 触发了值的更新，正好是 here。

要解决此问题，最简单的方法是扩展插件并更改此特定行为。扩展方法的一个例子：

$.extend($.fgtimepicker, 
   _doKeyDown: function (event) 
       //copy original source here with different handling for 13/enter case        
   
);

输入案例处理的完整示例如下：

<script>
//<![CDATA[
    $.extend($.fgtimepicker, 
        _doKeyDown: function (event) 
            var inst = $.fgtimepicker._getInst(event.target);
            var handled = true;
            inst._keyEvent = true;
            if ($.fgtimepicker._timepickerShowing) 
                switch (event.keyCode) 
                    case 9:
                        $.fgtimepicker._hideTimepicker();
                        handled = false;
                        break; // hide on tab out
                    case 13:
                        //CHANGE Enter KEY BEHAVIOUR
                        //NO NEED TO FIRE THE UPDATE ---> $.fgtimepicker._updateSelectedValue(inst);
                        $.fgtimepicker._hideTimepicker();
                        handled = false;
                        break; // hide on tab out
                    case 27:
                        $.fgtimepicker._hideTimepicker();
                        break; // hide on escape
                        default:
                            handled = false;
                
             else if (event.keyCode == 36 && event.ctrlKey)  // display the time picker on ctrl+home
                $.fgtimepicker._showTimepicker(this);
             else 
                handled = false;
            
            if (handled) 
                event.preventDefault();
                event.stopPropagation();
            
    
 );
 //]]>
 </script>

这将防止由 Enter 键引起的任何更新事件。

请注意，这段脚本必须像 document.ready 一样立即启动，这就是我在 <script> 标签中包含扩展的原因，以便以后的人更清楚。