Disable Left and Right keys in JQuery Steps

Question

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

  });
});

Nice answer here: [link](https://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser) — Wattcey, Dec 11 '17 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, Dec 11 '17 at 16:47

score 4 · Answer 1 · edited Feb 03 '18 at 16:39

4

Set enableKeyNavigation to false in jquery.steps.js.

edited Feb 03 '18 at 16:39

Jake

13,097
9
44
73

answered Feb 03 '18 at 15:19

Peter F

61
4

score 2 · Answer 2 · answered Oct 09 '21 at 20:21

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.

Wow, had no idea that the official documentation is wrong about it techlaboratory.net/jquery-smartwizard — Ejaz, Jul 07 '22 at 06:19

score 1 · Answer 3 · answered Dec 11 '17 at 16:32

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

  });
});

I already used event.preventDefault(), but I still have the same problem — Amir Nassal, Dec 11 '17 at 16:49

score 1 · Answer 4 · answered Dec 11 '17 at 16:39

1

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.

answered Dec 11 '17 at 16:39

Gabriele Petrioli

191,379
34
261
317

Yes it works, but I want it only if the user hit the Left or the Right arrow Key, because when I write in a textarea and I hit the left or the right arrow key, it changes the steps – Amir Nassal Dec 11 '17 at 16:45
So, you have other way to navigate which you want to continue using. Although it should not navigate away when the focus is in an element. There is an option `suppressPaginationOnFocus` for that that is by defauly `true` so it should not be happening. Are you using the latest version ? – Gabriele Petrioli Dec 11 '17 at 16:52
Yes, I have the v1.1.0 – Amir Nassal Dec 11 '17 at 16:54
@Amir do you have a live example that demonstrates the problem ? – Gabriele Petrioli Dec 11 '17 at 17:00

score 1 · Answer 5 · answered May 15 '20 at 08:59

1

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

answered May 15 '20 at 08:59

Bhargav hegde

11
1

Disable Left and Right keys in JQuery Steps

5 Answers5