Question

Table or Section Keystroke vs. "Add"

Forms How To Web Customizations

Updated February 15, 2019

asked on February 15, 2019

Is it possible to program a keystroke command instead of having to click the "Add" button for table rows and/or sections? We have police officers using laptops in vehicles and using the mouse/touchpad and then having to "go back" into the table to fill more information out. They'd love to be able to just use tab and keystrokes to fill out an entire form.

Any ideas? Thanks.

0 0

Answer

SELECTED ANSWER

replied on February 15, 2019

Here's a quick example that works in my test environment.

window.addEventListener("keydown", function(event) {
    // Possible modifier keys:
	// event.altKey
	// event.ctrlKey
	// event.metaKey (Windows key [on macOS it's Command])
	// event.shiftKey

    if(event.altKey) {
        if(event.key == "n") {
		    $("a#q11").click(); // make sure to find the actual q number on your form.
		}
    }
}, true);

Before you try this, open up your form on one of your mobile units and try out the keyboard shortcut that you are thinking of using. The reason is that between the browser, the OS, and any other software you have installed, there are many keyboard combinations that you can't use.

1 0

Replies

replied on February 15, 2019 • Show version history

Here's some Javascript. These assume that your table has the class name of test_table.

$(document).ready(function () {
  
  $(document).keypress(function(event) {

    //Add Row to Table upon pressing Ctrl+Enter
    if (event.which == 10) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 10) { 

    //Add Row to Table upon pressing Enter
    if (event.which == 13) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 13) { 

    //Add Row to Table upon pressing A
    if (event.which == 97) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 97) { 

    //Add Row to Table upon pressing +
    if (event.which == 43) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 43) { 

    //Add Row to Table upon pressing Spacebar
    if (event.which == 32) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 32) { 

    //Add Row to Table upon pressing ` (key above Tab) 
    if (event.which == 96) { 
      $('.test_table .cf-table-add-row').trigger('click'); 
    } //end of: if (event.which == 96) { 

  }); //end of: $(document).keypress(function(event) {
  
}); //end of: $(document).ready(function () {

1 0

replied on February 15, 2019

FYI, the "which" property is deprecated, and at some point may stop working.

0 0

replied on February 15, 2019

Oh, I didn't know that. I got the code directly from the JQuery API. https://api.jquery.com/keypress/

0 0

replied on February 15, 2019 • Show version history

MDN is the best source for what's current. But yeah, it's hard to keep up.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

0 0

replied on February 15, 2019

I don't know if you can get it to work, but you can try mousetrap.js

0 0

You are not allowed to follow up in this post.

Question

Question

Table or Section Keystroke vs. "Add"

Answer

Replies

Sign in to reply to this post.