Действие по умолчанию для выполнения при нажатии Enter в форме

Question

У меня есть форма jsf 1.2 с двумя кнопками и несколькими полями ввода. Первая кнопка отбрасывает введенные значения и заново заполняет страницу значениями из db, вторая кнопка сохраняет введенные значения. Проблема возникает, когда пользователь нажимает клавишу ввода, когда курсор находится в одном из полей ввода, форма отправляется и выполняется действие, связанное с первой кнопкой.

Код выглядит так:

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

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

Можно ли объявить определенную кнопку как действие по умолчанию при нажатии клавиши ввода? Это поведение действительно где-то указано?

Answer 1

Это не относится только к JSF.Это специфично для HTML.Раздел 4.10.22.2 спецификации форм HTML5 в основном указывает, что первый встречающийся элемент <input type="submit"> в «порядке дерева» в том же <form>, что и текущий элемент ввода в дереве HTML DOM, будет вызываться при вводенажмите.

В основном есть два обходных пути:

• Используйте JavaScript для захвата клавиши ввода, нажмите и вызовите нужную кнопку.

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

  Еслиу вас есть текстовые области в форме, вы хотели бы поместить JS на все элементы ввода не-textarea, а не на форму.См. Также Чтобы запретить пользователям отправлять форму, нажмите 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> для декларативного определения кнопки, которая должна вызываться при нажатии клавиши ввода в форме.

<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>, который вКоманда turn проверяет, нажата ли клавиша ввода в элементе non-textarea / button / link, а затем вызывает click() для целевого элемента.В основном так же, как 1-й упомянутый обходной путь в этом ответе.

Answer 2

Я нашел способ менее хакерский и хорошо работающий. Идея скрыта 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 может быть активирована.

Answer 3

Чтобы скрыть элементы, вы можете использовать css: style="visibility: hidden"

Чтобы изменить действие по умолчанию, если вы используете простые лица, вы можете использовать: <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>

Source: Новый компонент Primefaces: DefaultCommand

Answer 4

Игнорировать клавишу ВВОД только в текстовых полях ввода ( источник ):

<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>

Answer 5

Следуя рекомендации BalusC для решения проблемы с помощью JavaScript, я написал некоторый код 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

Answer 6

Вы можете использовать h:commandLink для первой кнопки и присвоить ей стиль css, например h:commandButton.

. Например, примеры начальной загрузки "btn btn-default" выглядят одинаково в commandLink и commandButton.