CODEWITHSUNDEEP
javascriptjqueryjquery-steps
Amir Nassal
Amir Nassal

Reputation: 441

Disable Left and Right keys in JQuery Steps

I have a Jquery Steps form that contains three steps. I want in the last step to disable the left and right keys so I can stay in the same step.

$(function() {
  form_prop = $("#new_prop").show();
  form_prop.steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {

      if (currentIndex == 2) {
        form_prop.on('keyDown', function(event) {
          const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
          if (key == "ArrowRight" || key == "ArrowLeft") {
            // Disable Next and previous
          }
        });
      }
    }

  });
});

Upvotes: 2

Views: 3194

Answers (5)

Dixit Patel
Dixit Patel

Reputation: 56

You can change the optional setting of Smart Wizard. If you already have this method

$('#smartwizard').smartWizard({

Add following block to it

keyboardSettings: {
      keyNavigation: false, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
  },

If you don't have that method, just add it to your page javascript.

 $('#smartwizard').smartWizard({
     keyboardSettings: {
          keyNavigation: false, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      },
 });

Hope this helped.

Upvotes: 2

Bhargav hegde
Bhargav hegde

Reputation: 11

First Make sure that jquery.steps.js is included. If jquery.steps.min.js is included replace it by jquery.steps.js Open the jquery.steps.js file change enableKeyNavigation to false enter image description here

Upvotes: 1

Peter F
Peter F

Reputation: 61

Set enableKeyNavigation to false in jquery.steps.js.

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

From the docs i see that you can return false from the onStepChanging event to cancel the change.

So 

$(function() {
  form_prop = $("#new_prop").show();
  form_prop.steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {

      if (currentIndex == 2) {
          return false;
      }
    }

  });
});

Should work.

Upvotes: 1

Gilsido
Gilsido

Reputation: 572

I'd try :

$(function() {
  form_prop = $("#new_prop").show();
  form_prop.steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {

      if (currentIndex == 2) {
        form_prop.on('keyDown', function(event) {
          const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
          if (key == "ArrowRight" || key == "ArrowLeft") {
            event.preventDefault();// Disable Next and previous
          }
        });
      }
    }

  });
});

Upvotes: 1

Related Questions