【问题标题】:How to set focus of ICEFaces component after initial rendering?如何在初始渲染后设置 ICEFaces 组件的焦点?
【发布时间】:2011-06-22 15:28:43
【问题描述】:

我有一个复杂的 ICEFaces XHTML 页面,它根据用户在页面上输入数据时设置的标志有条件地呈现某些组件。我想做的是在某个字段出现后立即将其聚焦到某个字段,这可能不在页面的初始渲染期间。

ICEFaces documentation 建议我可以使用 outputBody 组件的 focus 属性来执行此操作。具体来说:

如果您设置初始焦点,则必须在第一次渲染调用时渲染焦点组件,如果没有,则仅在组件被渲染时设置焦点属性。

这似乎表明我可以在我的条件组件被渲染时操纵焦点属性的值。但是,我没有看到 inputText 组件的任何属性允许我在渲染组件时更改值。

我是否误读了文档?何时何地可以更改 outputBody 的 focus 属性的值,以便条件渲染的字段在出现时获得输入焦点?还是我使用了错误的工具来解决这个问题?

【问题讨论】:

    标签: focus icefaces


    【解决方案1】:

    也许你可以用这个

    JavascriptContext.applicationFocus(FacesContext.getCurrentInstance(), "form:fieldM");
    

    【讨论】:

      【解决方案2】:

      您可以使用一些 Javascript 来设置元素的焦点。

      这是执行此操作所需的 Java sn-p:

            JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),
                          "document.getElementById('myForm:myTxtBox').focus();");
      

      myTxtBox 是表单元素的 ID,myForm 是表单的 ID。

      您可以在任何地方使用它来更改某些变量的值来呈现/隐藏字段。

      【讨论】:

      • 不幸的是,在我的测试中,这种方法有时有效,有时无效,具体取决于什么操作导致系统呈现我的页面或显示我的条件字段。我能够验证 addJavascriptCall() 总是在我需要时触发;然而,Javascript 本身似乎并不总是执行。我使用的 Seam 框架可能会使事情复杂化。此问题的已接受答案中显示的方法似乎 100% 有效。
      【解决方案3】:

      由于我同时使用 Seam 和 ICEFaces,我无法从我的服务器端 Java 代码中可靠地调用 Javascript。但是,我能够在我的 XHTML 中添加必要的 Javascript 内联,在有条件地呈现的 ui:component 中,靠近我需要焦点转到的输入字段。我的 XHTML 的相关部分如下所示:

      <ice:panelGroup id="textPanelInput" >
          <ice:form id="textInputForm"  partialSubmit="true" style="vertical-align:middle;">
              <ice:inputText id="textInput"  valueChangeListener="#{appField.valueChangeListener}"
                             size="#{appField.fieldDefLengthAsInt}" 
                             value="#{appField.value}"
                             styleClass="fieldStyle" rendered="#{appField!=null}"
                             >                    
              </ice:inputText>
              <ice:message id="jo" for="textInput" />
          </ice:form>
      </ice:panelGroup>
      <script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>
      

      底部的 Javascript 行是我为解决问题而添加的行。上面的所有代码都在一个 ui:component 块中,根据其他条件可能会或可能不会呈现。当这个 ui:component 块被渲染时,我的 Javascript 随之而来,并将输入焦点设置到我想要的输入字段。

      【讨论】:

        【解决方案4】:

        ICEfaces 支持具有设置焦点功能的javascript api。因此,您可以像在下一个摘录中一样使用它:

        <script type="text/javascript">
          jQuery(document).ready(function () {
              ice.applyFocus(elementId);
          });
        </script>
        

        elementIdjsf component clientId

        ICEFaces javascript Api

        【讨论】:

          猜你喜欢
          • 2014-12-19
          • 2020-11-05
          • 2019-12-13
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-07-04
          • 1970-01-01
          相关资源
          最近更新 更多