jsf-2 - Primefaces inputtext 焦点在文本末尾

Question

这是我的 JSF 片段:

<p:tabView id="tabView" var="tab" value="#{data.tabs}" widgetVar="tabViewWidget"
                activeIndex="#{data.newActiveTabIndex}">

                <p:ajax event="tabClose" listener="#{logic.closeTab}" />

                <p:tab title="#{tab.content.title != null ? tab.content.title : '&amp;lt;new&amp;gt;'}"
                    closable="#{tab.isClosable and data.tabs.size() > 2}">
                    <h:outputText value="#{tab.id} Test" />

                    <p:focus rendered="#{data.componentIdToFocus != null}" for="#{data.componentIdToFocus}" />

                    <p:inputText id="test" value="#{tab.content.title}">
                        <p:ajax event="keyup" listener="#{logic.setFocusingComponent}" update=":form:tabView" />
                    </p:inputText>
                </p:tab>

            </p:tabView>

目的是每个选项卡中都有一个文本字段，用于在编写时更新选项卡的标题。除了 p:focus 将光标放在已写文本的开头之外，给定的代码段有效。我希望将光标放在已写文本的末尾。以便用户可以键入，并且在他/她键入时标题会自动调整。

我希望我的案子是清楚的。有人对此有解决方案吗？

最好的问候，弗洛里安

Answer 1

您可以使用 onfocus="this.value=this.value"技巧来“取消选择”该值，以便光标自动结束在该值的末尾。这应该适用于 <p:inputText>因为它基本上只生成一个 <input type="text">元素。

<p:inputText ... onfocus="this.value=this.value" />

另见:

• Use JavaScript to place cursor at end of text in text input element

---

与具体问题无关，我不会在 keyup 事件和整个 tabview 的更新上使用 ajax 等。这似乎相当昂贵。我宁愿在这里通过 JS/jQuery 进行简单的 HTML DOM 遍历和操作。

例如

<p:inputText ... onkeyup="updateTitle(this)" />

与

function updateTitle(inputInTab) {
    var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
    $("a[href='#" + panelId + "']").text(inputInTab.value);
}