这是我的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 : '&lt;new&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将光标放在已写入文本的开头。我希望光标放在已经写入的文本的末尾。这样用户可以输入并在他/她输入标题时自动适应。
我希望我的情况很明确。 有人有解决方案吗?
祝你好运, 弗洛里安
答案 0 :(得分:7)
您可以使用onfocus="this.value=this.value"
技巧“取消选择”该值,以便光标自动结束于值的末尾。这应该对<p:inputText>
有效,因为它基本上只生成<input type="text">
元素。
<p:inputText ... onfocus="this.value=this.value" />
无关,我不会在keyup事件和整个tabview的更新上使用ajax等。这似乎相当昂贵。我宁愿用JS / jQuery做一个简单的HTML DOM traversion和操作。
E.g。
<p:inputText ... onkeyup="updateTitle(this)" />
与
function updateTitle(inputInTab) {
var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
$("a[href='#" + panelId + "']").text(inputInTab.value);
}