58

2つのボタンといくつかの入力フィールドを備えたjsf1.2フォームがあります。最初のボタンは入力された値を破棄し、dbからの値をページに再入力し、2番目のボタンは入力された値を保存します。この問題は、カーソルが入力フィールドの1つにあるときにユーザーがEnterキーを押すと、フォームが送信され、最初のボタンに関連付けられたアクションが実行されるときに発生します。

コードは次のようになります。

<h:commandButton action="#{bean.reset}" value="Reset" />
<h:commandButton action="#{bean.save}" value="Save" />

<!-- h:datatable with several h:inputText elements -->

Enterキーを押したときに、特定のボタンをデフォルトのアクションとして宣言することはできますか？この動作は実際にどこかで指定されていますか？

4

6 に答える 6

115

これはJSFに固有のものではありません。これはHTMLに固有です。HTML5フォーム仕様セクション4.10.22.2は、基本的に、HTML DOMツリーの現在の入力要素<input type="submit">と同じ「ツリー順序」で最初に出現する要素が、Enterキーを押すと呼び出されることを指定しています。<form>

基本的に2つの回避策があります。

  • JavaScriptを使用して、Enterキーの押下をキャプチャし、目的のボタンを呼び出します。

    <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">

    フォームにtextareasがある場合は、フォームではなく、textarea以外のすべての入力要素にJSを配置します。Enterキーを押して、ユーザーがフォームを送信できないようにするも参照してください。

  • ボタンをHTMLで交換し、CSSフロートを使用して元に戻します。

    <div style="width: 100px; clear: both;">
    <h:commandButton action="#{bean.save}" value="Save" style="float: right;" />
    <h:commandButton action="#{bean.reset}" value="Reset" style="float: left;" />
</div>

    ピクセルの微調整のみが必要な場合があります。もちろん、CSSを独自の.cssファイルに入れます。使用styleはお勧めできません。上記の例は簡潔にするためのものです。

PrimeFacesを使用する場合は、3.2以降<p:defaultCommand>、フォーム内でEnterキーを押したときに呼び出されるボタンを宣言的に識別するために使用できます。

<h:form>
    <p:defaultCommand target="save" />
    ...
    <h:commandButton id="reset" action="#{bean.reset}" value="Reset" />
    <h:commandButton id="save" action="#{bean.save}" value="Save" />
</h:form>

これは、JavaScriptを使用して、keydownリスナーを親にアタッチし、親<h:form>が非textarea / button / link要素でEnterキーが押されたかどうかを確認してclick()から、ターゲット要素を呼び出すために使用されます。基本的に、この回答で最初に述べた回避策と同じです。

于 2011-03-30T12:06:11.353 に答える
10

ハッキーが少なく、うまく機能する方法を見つけました。アイデアは隠されていcommandButtonます。

残念ながら、display:noneスタイルは使用できません。その場合、スタイルはcommandButton無視されます。visibility:hiddenコンポーネントのスペースが予約されているため、適切ではありません。

ただし、次のCSSを使用して、外観のサイズがゼロになるようにスタイルを微調整できます。

.zeroSize {
    visibility: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 0px;
    height: 0px;
}

そして今必要なのは：

<h:commandButton value="" action="#{bean.save}" class="zeroSize" />

これにより、コマンドボタンが非表示になり、first-next-submit-buttonルールに従ってアクティブ化できます。

于 2014-05-12T12:00:09.847 に答える
5

要素を非表示にするには、cssを使用できます。style="visibility: hidden"

Primefacesを使用する場合にデフォルトのアクションを変更するには、次を使用できます。<p:defaultCommand target="yourButtonDefault" /> 例：

<h:form id="form">

    <h:panelGrid columns="3" cellpadding="5">
        <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
        <p:inputText id="name" value="#{defaultCommandBean.text}" />
        <h:outputText value="#{defaultCommandBean.text}" id="display" />
    </h:panelGrid>

    <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
    <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
    <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />

    <p:defaultCommand target="btn3" />

</h:form>

ソース：Primefacesの新しいコンポーネント：DefaultCommand

于 2015-03-01T06:48:59.257 に答える
3

JavaScriptを使用して問題を解決するためのBalusCの推奨に従って、私はその仕事をするためにいくつかのjQueryコードを書きました。

$(function(){
  $('form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

CodePen：http ://codepen.io/timbuethe/pen/AoKJj

于 2014-01-20T13:22:41.957 に答える
3

テキスト入力フィールド（ソース）でのみENTERキーを無視します。

<script type="text/javascript"> 

  function stopRKey(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); 
     var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
     if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
  } 

  document.onkeypress = stopRKey; 

</script>
于 2015-04-29T12:45:42.827 に答える
0

最初のボタンにaを使用しh:commandLinkて、のようなcssでスタイルを設定できますh:commandButton。

たとえば、ブートストラップ"btn btn-default"はcommandLinkとcommandButtonで同じように見えます。

于 2018-03-02T12:54:11.723 に答える