Geek Answers Handbook

Using the return / enter key to save the edited cell in a file in Primitives 3.4 in a cell that is editable

As the name says, instead of clicking on the "Save" button after switching to edit mode, I would like to have the same functionality when I press the enter / return key.

I tried to do this with p: hotkey, but apparently p: hotkey will not work with targeted editable components.

Is there any other way to do this than to delve into jQuery?

+7
source share
2 answers

Is there any other way to do this than to delve into jQuery?

Yes, using plain vanilla JS. But it ends, perhaps with a browser-specific template. Don’t joke, this is not possible with JSF, since magic really has to happen on the client side. Since <p:cellEditor> does not support the requested function (so that it can just generate the necessary jQuery code on its own), you need to write it yourself.

Been there, done this:

 $(document).on("keydown", ".ui-cell-editor-input input", function(event) { if (event.keyCode == 13) { $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click(); } });

Just put it in some global JS file. This covers all input fields inside cell editors.

+8
source

A slightly modified version of the BalusC code (see also issue 433 PrimeFaces ):

  • prevent adding a new row to the table when pressing "Enter"
  • cancel editing on "Escape" click
 $(document).on("keydown", ".ui-cell-editor-input input", function(event) { if (event.keyCode == 13) { // Enter $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click(); return false; // prevents executing other event handlers (adding new row to the table) } if (event.keyCode == 27) { // Escape $(this).closest("tr").find(".ui-row-editor .ui-icon-close").click(); return false; } });
0
source

More articles:


All Articles