Question

我是Visualforce和Apex的新手。我正在尝试将焦点放在apex inputText字段上，该字段放在一个ouputpanel中，它将根据一个动作函数弹出。我尝试使用javascript函数设置焦点但没有效果。有人可以帮我这个吗？

Visualforce代码：

<apex:outputlabel onclick="fnUpdateName('{!ID}','{!Name}');" style="font-weight:normal !important;" > Edit name </apex:outputlabel>
<apex:actionfunction name="actUpdateName" action="{!ShowPopup}" reRender="UpdateName">
                         <apex:param name="Id" value="" assignTo="{!Id}"/>
                         <apex:param name="Name" value="" assignTo="{!Name}"/>                                              
                      </apex:actionfunction>

输出面板：

<apex:outputPanel id="UpdateName">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!update}"/> 
<apex:outputPanel styleClass="customPopup" layout="block" rendered="{!update}">
<apex:pageBlock >
<div class="panel panel-default">     
<div class="panel-heading">        
<h4><b Style="color:#555">Edit Name</b></h4>
</div> 
<div class="panel-body">
<table class="tblPopUp">  
<tr>    
<td><font style="color:#337ab7">Name: &nbsp;&nbsp;</font></td>
<td> <apex:inputText id="newName" value="{!Name}" styleClass="inputField" onfocus="this.value = this.value;"  /></td> <br/> 
</tr>  
</table>
<br/><br/>
<apex:commandButton value="Update"  action="{!UpdateName}" Render="tblBlock"/>
<apex:commandButton value="Cancel"  action="{!ClosePopup}" />                                                     
</div> 
</div>
</apex:pageBlock> 
</apex:outputPanel> 
</apex:outputPanel>

JS功能：

function fnUpdateName(ID, Name)
{
    document.getElementById('{!$Component.frmid.DetBlock.tblBlock.popUpBlock.updatePageBlock.newName}').focus();
    actUpdateName(ID, Name);     
}

另外，每当我使用基于组件ID的setFocus和类名时，我都会收到以下Javascript错误。

未捕获的TypeError：无法读取null
的属性'focus'

任何帮助都非常感谢.. !!

Answer 1

您的 apex：inputText 字段是嵌套的，因此您应该更加完整的组件路径说明符，如here所述。

您应该在VF组件上定义一些ID：

for apex：form
for apex：pageBlock

最后输入的完整路径将如下所示：

＆＃39; {$！Component.form_id.pageBlock_id.newName}＆＃39;

outputPanel：

<apex:form id="frm">
    <apex:outputPanel id="UpdateName">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!update}"/> 
        <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!update}">
            <apex:pageBlock id="updatePageBlock">
                <div class="panel panel-default">     
                    <div class="panel-heading">        
                        <h4><b Style="color:#555">Edit Name</b></h4>
                    </div> 
                    <div class="panel-body">
                        <table class="tblPopUp">  
                            <tr>    
                                <td><font style="color:#337ab7">Name: &nbsp;&nbsp;</font></td>
                                <td> <apex:inputText id="newName" value="{!Name}" styleClass="inputField" onfocus="this.value = this.value;"  /></td> <br/> 
                            </tr>  
                        </table>
                        <br/><br/>
                        <apex:commandButton value="Update"  action="{!UpdateName}" Render="tblBlock"/>
                        <apex:commandButton value="Cancel"  action="{!ClosePopup}" />                                                     
                    </div> 
                </div>
            </apex:pageBlock> 
        </apex:outputPanel> 
    </apex:outputPanel> 
</apex:form>

JS功能：

function fnUpdateName(ID, Name) {
  document.getElementById('{!$Component.frm.updatePageBlock.newName}').focus();
  actUpdateName(ID, Name);     
}

如何在visualforce页面的输出面板中设置焦点<apex：inputtext>

1 个答案: