Отключить левую и правую клавиши в шагах JQuery

У меня есть форма Jquery Steps, содержащая три шага. Я хочу на последнем шаге отключить левую и правую клавиши, чтобы я мог оставаться на том же шаге.

$(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
person Amir Nassal    schedule 11.12.2017    source источник
comment
Хороший ответ здесь: ссылка   -  person Wattcey    schedule 11.12.2017
comment
Да, я использовал event.preventDefault(), но у меня все та же проблема, он все еще меняет шаги, когда я нажимаю клавишу со стрелкой влево или вправо.   -  person Amir Nassal    schedule 11.12.2017

Ответы (4)


arrow_upward
4
arrow_downward

Установите enableKeyNavigation в false в jquery.steps.js.

person Peter F    schedule 03.02.2018

arrow_upward
1
arrow_downward

Я бы попробовал:

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

  });
});
person Gilsido    schedule 11.12.2017
comment
Я уже использовал event.preventDefault(), но у меня все та же проблема - person Amir Nassal; 11.12.2017

arrow_upward
1
arrow_downward

Из документов я вижу, что вы можете return false из события onStepChanging отменить изменение.

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

  });
});

Должно сработать.

person Gabriele Petrioli    schedule 11.12.2017
comment
Да, это работает, но я хочу, чтобы это было только в том случае, если пользователь нажал клавишу со стрелкой влево или вправо, потому что, когда я пишу в текстовом поле и нажимаю клавишу со стрелкой влево или вправо, он меняет шаги - person Amir Nassal; 11.12.2017
comment
Итак, у вас есть другой способ навигации, которым вы хотите продолжать пользоваться. Хотя он не должен уходить, когда фокус находится в элементе. Существует вариант suppressPaginationOnFocus для того, что по умолчанию true, поэтому этого не должно происходить. Вы используете последнюю версию? - person Gabriele Petrioli; 11.12.2017
comment
Да, у меня v1.1.0 - person Amir Nassal; 11.12.2017
comment
@ Амир, у тебя есть живой пример, демонстрирующий проблему? - person Gabriele Petrioli; 11.12.2017

arrow_upward
1
arrow_downward

Сначала убедитесь, что jquery.steps.js включен. Если jquery.steps.min.js включен, замените его на jquery.steps.js Откройте файл jquery.steps.js, измените enableKeyNavigation на false введите здесь описание изображения

person Bhargav hegde    schedule 15.05.2020