【发布时间】：2020-02-18 19:39:55
【问题描述】：
我提供了一个按钮，用于在 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>
支持 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;
}
}
【问题讨论】：
-
评论不用于扩展讨论；这个对话是moved to chat。
标签： primefaces jsf-2