无法将焦点设置在dataTable中的p：inputText

问题描述 投票：0回答：1

我提供了一个按钮，用于在dataTable的cellEditor内部添加新的inputText。我想自动（在单击按钮之后）将焦点放在这个新的inputText上，以便用户可以开始输入数据而不必先单击该单元格。我的代码如下：

<p:commandButton action="#{myBean.addNewKeyword}" oncomplete="setFocus();" value="New keyword" onclick="editKeywords();" update='keywordForm' icon="fa fa-plus" />

<p:dataTable id="editKeywordsTbl" value="#{myBean.currentListKeywords}" var="keyWd" editMode="cell" editable="true" resizableColumns="true" widgetVar="editKeywords" rowIndexVar="index" >

    <p:ajax event="cellEdit" listener="#{myBean.onCellEditKeywords}" update="form" />
        <p:column headerText="Keyword" width="80">
            <p:cellEditor>
                 <f:facet name="output">
                      <h:outputText value="#{keyWd.keyword}" />
                 </f:facet>
                 <f:facet name="input">
                     <p:inputText value="#{keyWd.keyword}" placeholder="click here to edit" />
                 </f:facet>
            </p:cellEditor>
       </p:column>
</p:dataTable>

我试图用javascript在最后一个inputText上设置fokus：

function setFocus() {
    var myTable = document.getElementById('editKeywordsTbl');
    var inputs = myTable.getElementsByTagName('input');
    var elemLast = inputs[inputs.length - 1];
    elemLast.focus();
};

不幸的是，这不起作用！我也许应该提到，这是在对话框中发生的。非常感谢您的帮助。谢谢

为了澄清：我的问题不是获取inputText的ID。使用我的Javascript，我可以访问此元素，因此可以获得ID。

编辑：我在JavaScript中尝试了elemLast.click();。新的inputText将打开以进行编辑，并且焦点会停留一秒钟，然后迷路。我不明白为什么会这样。Edit2-最小可复制示例：Xhtml页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>

    <h:body>
        Hello from Facelets
        <br />

        <script type="text/javascript">
            function setFocus() {
                $(document).ready(function () {

                    var myTable = document.getElementById('editKeywordsTbl');
                    var inputs = myTable.getElementsByTagName('input');

                    var elemLast = inputs[inputs.length - 1];
                    console.log("elemLast: " + elemLast.id);
                    elemLast.click();
                    elemLast.focus();
                });
            }
        </script>

        <h:form id="keywordForm" prependId="false" >

            <p:commandButton action="#{myBean.addNewKeyword}" oncomplete="setFocus();" value="New keyword" update='keywordForm' />
            <br /><br /><br/>

            <p:dataTable id="editKeywordsTbl" value="#{myBean.currentListKeywords}" var="keyWd" editMode="cell" editable="true" resizableColumns="true" widgetVar="editKeywords" rowIndexVar="index" >

                <p:ajax event="cellEdit" listener="#{myBean.onCellEditKeywords}" />

                <p:column headerText="Keyword" width="80">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="[click me to edit]" rendered="#{keyWd.name == ''}" />
                            <h:outputText value="#{keyWd.name}" rendered="#{keyWd.name != ''}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{keyWd.name}" required="true" requiredMessage="Enter a keyword!" placeholder="click here to edit" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

Backing bean：

package test;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.SessionScoped;
import javax.faces.context.FacesContext;
import javax.inject.Named;
import org.primefaces.event.CellEditEvent;
import test.entity.Keyword;

@Named
@SessionScoped
public class MyBean implements Serializable {

    private List<Keyword> currentListKeywords = new ArrayList<>();

    public void addNewKeyword() {
        Keyword ap = new Keyword();
        ap.setName("");

        currentListKeywords.add(ap);
    }

    public void onCellEditKeywords(CellEditEvent event) {
        Object newWord = event.getNewValue();
//        LOG.info("newWord: " + newWord);

        FacesContext context = FacesContext.getCurrentInstance();
        Keyword currentWord = context.getApplication().evaluateExpressionGet(context, "#{keyWd}", Keyword.class);

        if (newWord == null) {
            newWord = " ";
        }
        if (currentWord != null) {
            currentWord.setName((String) newWord);
        }
//        ejbFacade.editKeyword(currentWord);
    }

    public List<Keyword> getCurrentListKeywords() {
        return currentListKeywords;
    }

    public void setCurrentListKeywords(List<Keyword> currentListKeywords) {
        this.currentListKeywords = currentListKeywords;
    }
}

最后是关键字类别：

package test.entity;

import java.io.Serializable;

public class Keyword implements Serializable {

    private String name;

    public Keyword(String name) {
        this.name = name;
    }

    public Keyword() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

enter image description here

primefaces jsf-2
1个回答
0
投票

您可以使用一些js，在按钮中添加oncomplete="selectFocus()"，然后使用p:remoteCommand来调用js代码，如下所示：

 <p:remoteCommand name="selectFocus" oncomplete="dataEditableFocus('dataTableWidgetVar', false);" />

您的js必须是这样的：

dataEditableFocus = function (dataTableWidgetVar, hasRowIndex) {
    var row;
    var tb = $(document.getElementById(PF(dataTableWidgetVar).id));
    var multiple = $(tb).find('tr td.ui-selection-column');
    if ($(multiple).length === 0) {
        if (hasRowIndex) {
            row = $(tb).find('tr td.ui-editable-column:nth-child(2)');
        } else {
            row = $(tb).find('tr td.ui-editable-column:nth-child(1)');
        }
        $(row).last().find('input').click();
    } else {
        if (hasRowIndex) {
            row = $(tb).find('tr td.ui-editable-column:nth-child(3)');
        } else {
            row = $(tb).find('tr td.ui-editable-column:nth-child(2)');
        }
        $(row).last().parent().children().first().click();
        $(row).last().find('input').click();
    }
}

如果使用PF('dataTableWidgetVar').addRow()在dataTable中添加一行，则使用此代码将焦点放在可编辑数据表中的第一个元素上（如果表为selectionMode="multiple"，则不可以更改代码中的nth-child(number)），则可以编辑代码以关注数据表中的每个元素。如果您的元素具有RowIndex通过在invoke函数中为true。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.