Make the tour advance on more events (blur, change, focus, select)

README.md

@@ -160,8 +160,16 @@ The comprehensive list of step options are listed below:
 
 * `fixedElement` [BOOLEAN] - set to true if the target element has fixed positioning. *Default*: false.
 
+* `nextOnTargetBlur` [BOOLEAN] - triggers nextStep() when the target loses the focus. *Default*: false.
+
+* `nextOnTargetChange` [BOOLEAN] - triggers nextStep() when the content or state of the target changes. *Default*: false.
+
 * `nextOnTargetClick` [BOOLEAN] - triggers nextStep() when the target is clicked. *Default*: false.
 
+* `nextOnTargetFocus` [BOOLEAN] - triggers nextStep() when the target gets the focus. *Default*: false.
+
+* `nextOnTargetSelect` [BOOLEAN] - triggers nextStep() when the user selects some text within the target. *Default*: false.
+
 * `onPrev` [FUNCTION] - callback for when 'Previous' button is clicked
 
 * `onNext` [FUNCTION] - callback for when 'Next' button is clicked
@@ -198,8 +206,16 @@ Tour options can be specified either through the tour JSON object, or through a
 
 * `skipIfNoElement` [BOOLEAN] - If a specified target element is not found, should we skip to the next step? *Default*: true.
 
+* `nextOnTargetBlur` [BOOLEAN] - Should we advance to the next step when the target loses focus? *Default*: false.
+
+* `nextOnTargetChange` [BOOLEAN] - Should we advance to the next step when the content or state of the target changes? *Default*: false.
+
 * `nextOnTargetClick` [BOOLEAN] - Should we advance to the next step when the user clicks on the target? *Default*: false.
 
+* `nextOnTargetFocus` [BOOLEAN] - Should we advance to the next step when the target gets the focus? *Default*: false.
+
+* `nextOnTargetSelect` [BOOLEAN] - Should we advance to the next step when the user selects some text within the target? *Default*: false.
+
 * `onNext` [FUNCTION] - Invoked after every click on a "Next" button.
 
 * `onPrev` [FUNCTION] - Invoked after every click on a "Prev" button.

src/js/hopscotch.js

@@ -1181,7 +1181,7 @@
    * @param {Object} initOptions Options to be passed to `configure()`.
    */
   Hopscotch = function(initOptions) {
-    var self       = this, // for targetClickNextFn
+    var self       = this, // for targetInteractNextFn
         bubble,
         calloutMgr,
         opt,
@@ -1252,11 +1252,11 @@
     },
 
     /**
-     * Used for nextOnTargetClick
+     * Used for nextOnTarget[Blur|Change|Click|Focus|Select]
      *
      * @private
      */
-    targetClickNextFn = function() {
+    targetInteractNextFn = function() {
       self.nextStep();
     },
 
@@ -1635,9 +1635,21 @@
           showBubble();
         }
 
-        // If we want to advance to next step when user clicks on target.
+        // If we want to advance to next step when user interacts with a target.
+        if (step.nextOnTargetBlur) {
+          utils.addEvtListener(targetEl, 'blur', targetInteractNextFn);
+        }
+        if (step.nextOnTargetChange) {
+          utils.addEvtListener(targetEl, 'change', targetInteractNextFn);
+        }
         if (step.nextOnTargetClick) {
-          utils.addEvtListener(targetEl, 'click', targetClickNextFn);
+          utils.addEvtListener(targetEl, 'click', targetInteractNextFn);
+        }
+        if (step.nextOnTargetFocus) {
+          utils.addEvtListener(targetEl, 'focus', targetInteractNextFn);
+        }
+        if (step.nextOnTargetSelect) {
+          utils.addEvtListener(targetEl, 'select', targetInteractNextFn);
         }
       });
 
@@ -1799,9 +1811,21 @@
       var step = getCurrStep(),
           targetEl = utils.getStepTarget(step);
 
+      // Detach the listener after we've interacted with the target OR clicked the next button.
+      if (step.nextOnTargetBlur) {
+        utils.removeEvtListener(targetEl, 'blur', targetInteractNextFn);
+      }
+      if (step.nextOnTargetChange) {
+        utils.removeEvtListener(targetEl, 'change', targetInteractNextFn);
+      }
       if (step.nextOnTargetClick) {
-        // Detach the listener after we've clicked on the target OR the next button.
-        utils.removeEvtListener(targetEl, 'click', targetClickNextFn);
+        utils.removeEvtListener(targetEl, 'click', targetInteractNextFn);
+      }
+      if (step.nextOnTargetFocus) {
+        utils.removeEvtListener(targetEl, 'focus', targetInteractNextFn);
+      }
+      if (step.nextOnTargetSelect) {
+        utils.removeEvtListener(targetEl, 'select', targetInteractNextFn);
       }
       changeStep.call(this, doCallbacks, 1);
       return this;