admin管理员组

文章数量:1335371

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

  });
});
Share edited Dec 11, 2017 at 16:27 Carl Edwards 14.5k12 gold badges66 silver badges131 bronze badges asked Dec 11, 2017 at 16:24 Amir NassalAmir Nassal 4412 gold badges7 silver badges22 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

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