Primefaces 5.1 日历在 select 个日期后在文本字段中失去焦点

Question

我们在项目中使用 primefaces 5.1，在我 select 弹出日历 window 中的某个日期后 p:calender，文本字段将失去焦点。由此引起的问题是您不能使用 tab 来关注表单中的下一个字段，而是转到表单中的第一个元素。即使是 primefaces showcase 也有这个问题： http://www.primefaces.org/showcase/ui/input/calendar.xhtml

有什么解决方法的建议吗？

Answer 1

在等待答案的过程中经过一些搜索和本地测试。我想出了一个办法来解决这个问题。它实际上是一个 JQuery UI 错误（或者可能不是自第一个版本以来就存在的错误并且仍然没有官方修复！）。我们需要覆盖 primefaces 使用的 jQueryUI 日期选择器。确保将该自定义脚本的导入放在最后一个方面，以便在最后一个订单中将其作为资源获取。

<f:facet name="last">
    <h:outputScript name="default/js/customDatePicker.js" />
</f:facet>

在 JavaScript 代码中，我执行以下操作将 _selectDate 合并到日期选择器中（更改在最后一个 else 中），这将覆盖原始 _selectDate 而不会更改其他。它会在 Chrome 和 IE11 上为我解决问题。

$(document).ready(function () {
    $.extend(jQuery.datepicker, {
        _selectDate: function (id, dateStr) {
            var onSelect,
                    target = $(id),
                    inst = this._getInst(target[0]);

            dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
            if (inst.input) {
                inst.input.val(dateStr);
            }
            this._updateAlternate(inst);

            onSelect = this._get(inst, "onSelect");
            if (onSelect) {
                onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
            } else if (inst.input) {
                inst.input.trigger("change"); // fire the change event
            }

            if (inst.inline) {
                this._updateDatepicker(inst);
            } else {
                this._hideDatepicker();
                inst.input.focus();
            }
        }
    });
});

Primefaces 5.1 日历在 select 个日期后在文本字段中失去焦点

Primefaces 5.1 calendar lose focus in the text field after select a date

jsf

calendar

focus

primefaces

jsf-2