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

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



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



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

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



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


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

696   6  

6 ответов:

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

есть в основном два способа решения:

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

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

    если у вас есть текстовые области в форме, вы хотели бы поместить 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 file; using 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> который в свою очередь проверяет, нажата ли клавиша enter в нетекстовом элементе/button/link, а затем вызывает click() на целевом элементе. В основном то же самое, что и 1-й упомянутый обходной путь в этом ответе.

100  
2017-05-23 15:25:57

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

9  
2014-05-12 15:11:53

чтобы скрыть элементы, вы можете использовать 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

4  
2015-03-01 08:58:19

следуя рекомендации 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

3  
2014-01-20 15:22:41

игнорировать клавишу 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>
3  
2015-04-29 15:45:42

можно использовать h:commandLink для первой кнопки и стиль его с помощью CSS, как h:commandButton.

например bootstraps "btn btn-default" посмотрите то же самое на commandLink и commandButton.

0  
2018-03-03 17:53:11

Comments

    Ничего не найдено.
Click here to cancel reply.