1

ここに私の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がすでに書き込まれているテキストの先頭にカーソルを置くことを除いて機能します。すでに書かれているテキストの最後にカーソルを置きたい。ユーザーが入力できるように、そして彼/彼女がタイプしている間、タイトルは自動的に適応します。

私のケースが明確であることを願っています。誰かがその解決策を持っていますか？

よろしく、フロリアン

4

1 に答える 1

8

このトリックを使用しonfocus="this.value=this.value"て値を「選択解除」し、カーソルが自動的に値の最後に到達するようにすることができます。<p:inputText>これは、基本的に<input type="text">要素だけを生成するのと同じくらいうまくいくはずです。

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

参照：

具体的な問題とは関係なく、キーアップイベントやタブビュー全体の更新にはajaxなどは使用しません。これはかなり高いようです。ここでは、JS/jQueryによる単純なHTMLDOMトラバージョンと操作を行いたいと思います。

例えば

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

と

function updateTitle(inputInTab) {
    var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
    $("a[href='#" + panelId + "']").text(inputInTab.value);
}
于 2013-01-16T19:38:51.343 に答える