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

【问题标题】：Restrict Ajax Mechanism while enter key is pressed in jsf component在jsf组件中按下回车键时限制Ajax机制
【发布时间】：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 中没有返回任何内容...您应该... stackoverflow.com/questions/34354839/… 是重复的吗？
@Kukeltje，我认为return 不会影响任何更改。即 oncomplete="return keyDownFalse()"。
我也试过了。但对我的用例没有影响。
在 ajax 请求结束时会触发 oncomplete... 确定需要吗？但现在我想起来了（你确实需要'return'），你不能阻止来自ajax 调用本身的ajax 调用。您需要在 timePicker 上首先阻止调用。白天让我看看我是否能找到“某种”重复

标签： jquery ajax jsf primefaces primefaces-extensions

【解决方案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> 标签中包含扩展的原因，以便以后的人更清楚。

【讨论】：