javascript - Disable Left and Right keys in JQuery Steps - Stack Overflow

admin管理员组

文章数量:1330917

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
          }
        });
      }
    }

  });
});

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
          }
        });
      }
    }

  });
});

• javascript
• jquery
• jquery-steps

Share Follow edited Dec 11, 2017 at 16:27 Carl Edwards 14.5k1212 gold badges6666 silver badges131131 bronze badges asked Dec 11, 2017 at 16:24 Amir NassalAmir Nassal 44122 gold badges77 silver badges2222 bronze badges 2

• Nice answer here: link – Wattcey Commented Dec 11, 2017 at 16:29
• Yes I used event.preventDefault() but I still have the same problem, it still change the steps when I hit the left or the right arrow key. – Amir Nassal Commented Dec 11, 2017 at 16:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Set enableKeyNavigation to false in jquery.steps.js.

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.

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
          }
        });
      }
    }

  });
});    

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.

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

本文标签： javascriptDisable Left and Right keys in JQuery StepsStack Overflow