如何在 visualforce 页面的输出面板中将焦点设置在 <apex:inputText>上

How to set focus on <apex:inputText> in ouput panel of visualforce page

本文关键字：apex inputText 设置 visualforce 输出 焦点      更新时间：2023-09-26

我对Visualforce和Apex很陌生。我正在尝试将焦点设置在顶点输入文本字段上，该字段放置在 ouputpanel 内，该字段将根据操作函数弹出。我尝试使用javascript函数设置焦点，但没有一个有效。谁能帮我解决这个问题？

视觉力代码：

<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错误。

未捕获的类型错误： 无法读取 null 的属性"焦点"

任何帮助真的非常感谢..！！

你的apex：inputText字段是嵌套的，因此你应该更完整的组件路径说明符，因为它在这里描述。

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

  1. 对于顶点：表单
  2. 对于顶点：页面块

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

'{！$Component.form_id.pageBlock_id.newName}'

输出面板：

<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);     
}
相关文章：