如何为Apache Wicket面板中的feedback组件添加聚焦行为

核心实现逻辑 #

Wicket官方没有给Feedback组件提供内置的聚焦API，我们可以通过自定义行为绑定JS触发的方式实现需求，只需要确保Feedback对应的DOM元素支持聚焦即可。 #

前置配置 #

首先给Feedback组件对应的HTML标签添加tabindex属性，普通无交互的DOM元素默认不支持聚焦，配置后即可通过JS触发聚焦：

<div wicket:id="feedback" tabindex="-1"></div>

tabindex="-1"代表该元素仅支持程序触发聚焦，不会被键盘Tab键遍历，不会干扰页面正常的键盘导航逻辑。 #

方式1：全局复用自定义行为（推荐） #

自定义可复用的行为类，所有需要聚焦的Feedback组件都可以直接绑定：

import org.apache.wicket.Component;
import org.apache.wicket.behavior.Behavior;
import org.apache.wicket.extensions.feedback.FeedbackPanel;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.OnDomReadyHeaderItem;

public class FocusOnFeedbackBehavior extends Behavior {
    @Override
    public void renderHead(Component component, IHeaderResponse response) {
        super.renderHead(component, response);
        // 仅当Feedback组件存在消息时才执行聚焦逻辑
        if (component instanceof FeedbackPanel && ((FeedbackPanel) component).anyMessage()) {
            String markupId = component.getMarkupId();
            response.render(OnDomReadyHeaderItem.forScript(
                String.format("document.getElementById('%s').focus();", markupId)
            ));
        }
    }
}

Java端给Feedback组件绑定行为：

FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");
// 开启输出组件ID，供JS选择DOM
feedbackPanel.setOutputMarkupId(true);
// 绑定自定义聚焦行为
feedbackPanel.add(new FocusOnFeedbackBehavior());
add(feedbackPanel);

方式2：Ajax场景下的临时实现 #

如果是Ajax提交触发的Feedback消息更新，可以直接在Ajax回调中追加聚焦逻辑，不需要单独定义行为类：

@Override
protected void onSubmit(AjaxRequestTarget target) {
    // 业务逻辑执行，添加提示消息
    error("提交失败，请修正输入项");
    if (target != null) {
        // 更新Feedback组件
        target.add(feedbackPanel);
        // 追加聚焦JS
        target.appendJavaScript(
            String.format("document.getElementById('%s').focus();", feedbackPanel.getMarkupId())
        );
    }
}

可选配置 #

如果需要聚焦时自动滚动到Feedback组件位置，只需修改JS代码，给focus方法传入配置即可：

document.getElementById('%s').focus({preventScroll: false});

注意：如果你的Feedback组件默认是隐藏状态，需要确保聚焦逻辑在组件显示之后执行，避免出现找不到DOM元素的报错。

内容的提问来源于stack exchange，提问作者ali