2011-08-16 8 views
4

私はRich Facesを初めて使用しており、richfaces 4.0を使用しています。私たちのプロジェクトではポップアップ要件があり、ポップアップパネルはrich:popupPanelを使用していました。
ポップアップでは、5〜10個の入力テキストボックスを持つフォームがあります。タブインデックスが動作していませんrichfaces popup panelk

次の問題が発生しています。 次のテキストボックスに移動するためのタブが機能していません。

tabindexプロパティを使用しましたが、豊富なフェイスでは機能しません。

誰もが私にこれを助けることができますか?

ありがとうございます。ここで

答えて

1

RichFacesの4で有効にタブ機能を備えたサンプルのポップアップパネルです:

<script type="text/javascript"> 
    jQuery('input').live("keypress", function(e) { 
     var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 
     /* ENTER PRESSED*/ 
     if (key == 9) { // 9 for TAB 
      /* FOCUS ELEMENT */ 
      var inputs = jQuery(this).parents("form").eq(0).find(":input"); 
      var idx = inputs.index(this); 

      var move = (e.shiftKey) ? (-1) : (1); // for Shift+TAB 

      if (idx == inputs.length - 1) { 
       inputs[0].select() 
      } else { 
       inputs[idx + move].focus(); // handles submit buttons 
       inputs[idx + move].select(); 
      } 
      return false; 
     } 
    }); 
</script> 

<rich:jQuery query="focus().select()" selector="#thegrid :input:visible:enabled:first" name="focusInput"/> 

<rich:popupPanel id="samplepopup" modal="true" resizeable="true" height="220" width="400" 
       onmaskclick="#{rich:component('samplepopup')}.hide()" 
       onshow="focusInput();"> 

    <f:facet name="header"> 
     <h:outputText value="sample"/> 
    </f:facet> 

    <h:form> 

     <h:panelGrid id="thegrid" columns="2" style="direction: rtl;"> 
      <h:outputText value="Current Pass"/> 
      <h:inputSecret id="pass1" value="#{userBean.pass}"/> 
      <h:outputText value="New Pass"/> 
      <h:inputSecret id="pass2" value="#{userBean.newPass}"/> 
      <h:outputText value="New Pass Confirm"/> 
      <h:inputSecret id="pass3"/> 
     </h:panelGrid> 
    </h:form> 

</rich:popupPanel> 

<a4j:commandButton value="show sample" onclick="#{rich:component('samplepopup')}.show()"/> 
+1

を、しかし、男は、それであります醜い。これは、自然なhtml tabindexで自然に動作するフォームの他の部分でタブが完全に壊れる原因になります。 – Eric

1

一般的な回避策が責任を負う機能上書きすることができます。これは、作品

RichFaces.ui.PopupPanel.prototype.processTabindexes = function (input) { 
    if (!this.firstOutside) { 
     this.firstOutside = input; 
    } 
    if (!input.prevTabIndex) { 
     input.prevTabIndex = input.tabIndex; 
//  input.tabIndex = -1; // This line was marked out 
    } 
    if (!input.prevAccessKey) { 
     input.prevAccessKey = input.accessKey; 
     input.accessKey = ""; 
    } 
}; 
関連する問題