Modules/Methods for Faster Data Entry

Question

I have an unlimited-cardinality text field on a node that users need to enter 50-100 values on. Right now, the user has to type in one value, click "add another item", and then click inside the text field to start the process again.

Is there a module or a way to enable them to simply hit "Enter" after entering the first item, that will automatically open the next text entry area and move the cursor inside it?

Answer 1

This particular solution was a custom form, where I had fine control over the CSS classes applied to the different elements, but it might also work for node-edit et al.

You would use hook_form_alter() to target whichever form you want. Then, you would add a custom CSS class and an '#attached' property to that form element, containing a 'js' element which would point to a custom javascript file within your module. The code in this file would watch elements of that CSS class for when a user hit 'tab', and then automatically click the 'Add More' button for you. JS added below for reference:

(function ($) {
  Drupal.behaviors.formAutoTab = {
    attach: function (context, settings) {
      $('.othercustomclass').focus();
      $('.customclass').keydown(function (event) {
        if (event.keyCode == '9') {
          $('input[type=submit][id^=addbuttonidgoeshere]').mousedown();
          event.preventDefault();
        }
      });
    }
  }

})(jQuery);

The trick is .othercustomclass which you will need to refocus on the new element after it's added. I think core Drupal does apply some sort of 'ajax-processed' class or something else to the fields added by the 'Add More' button, which you might be able to use as the jquery selector.

Answer 2

There probably isn't such a module already, but you could add this functionality yourself with a small javascript snippet.

The easiest way to do this is to download and enable JS Injector and then click [+ Add] for a new injection rule.

Name it whatever you'd like, paste in the code below, and make sure to limit the scope to:

node/add/*
node/edit/*

Custom javascript that handles this behavior:

(function ($) {
  Drupal.behaviors.multiTextEnter = {
    attach: function (context, settings) {
      // Begin attach method

      // Only run in document context
      if (context !== document) {
        return;
      }

      // Look for multiple field container
      var $multiTable = $('.field-multiple-table');
      var $nodeForm = $('.node-form');

      if ($multiTable.length) {

        // Listen for ajaxComplete
        $nodeForm.ajaxComplete(function(e, xhr, settings) {
          $nodeForm.find('.field-multiple-table .form-text:visible:last').focus();
        });

        $nodeForm.delegate('.field-multiple-table .form-text', 'keydown', function(e) {
          // if enter key is pressed
          if (e.which == 13) {
            // trigger "Add another item"
            $('.field-add-more-submit').trigger('mousedown');
            // prevent default form submit when enter is pressed
            e.preventDefault();
          }
        });
      }
      // End attach method
    }
  };
})(jQuery);