Primefaces inputtext Fokus am Ende des Textes

Hier ein snippet von meiner 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>

Die Absicht ist, dass es ein textfield in jedem Register, die updates der Titel der Registerkarte, während Sie schreiben.
Die angegebenen snippet funktioniert, außer, dass p:Fokus-setzt den cursor an den Anfang des Textes, ist schon geschrieben. Ich möchte den cursor an das Ende des Textes bereits geschrieben. Damit ein Benutzer Daten eingeben können, und während er/Sie die Eingabe der Titel passt sich automatisch an.

Ich hoffe, mein Fall ist klar.
Hat jemand eine Lösung dafür?

Beste Grüße,
Florian

  • Geben Sie eine id, um Ihre Registerkarte, und ändern Sie update-Teil des ajax ":form:tabView:tabIndex". Diese sollten nur aktualisieren Sie die Registerkarte Titel und Sie würden nicht verlieren den Fokus für den text.
InformationsquelleAutor Florian Huonder | 2013-01-16
  1. 7

    Können Sie die onfocus="this.value=this.value" trick, um "deaktivieren" den Wert so, dass der cursor automatisch endet, bis am Ende der Wert. Diese Arbeit sollte als gut für die <p:inputText> wie im Grunde erzeugt nur ein <input type="text"> element.

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

    Siehe auch:

    Unabhängigen zu dem konkreten problem, ich würde nicht ajax verwenden, und solche, die auf keyup-Ereignis und ein update des gesamten tabview. Dies scheint zu sein, ziemlich teuer. Ich würde eher eine simple HTML DOM traversion und manipulation hier durch JS/jQuery.

    E. g.

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

    mit

    function updateTitle(inputInTab) {
    var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
    $("a[href='#" + panelId + "']").text(inputInTab.value);
}
    • Vielen Dank. Es funktioniert wie erwartet.
    InformationsquelleAutor BalusC
Schreibe einen Kommentar