Отключить удерживание кнопок вверх и вниз на счетчике jQueryUI

Question

Я использую jQuery 1.7.1 и jQueryUI 1.9.1.

У меня есть счетчик, и каждый раз, когда он изменяется, текстовое поле будет создано или удалено, чтобы соответствовать номеру на счетчике. Удержание кнопки приведет к быстрому изменению номера, в результате чего создается или удаляется тонна полей.

Не большая проблема, так как это клиентская сторона, но мне это не нравится. Поэтому я хочу отключить быстрое вращение, когда пользователь держит кнопки счетчика.

Я придумал решение, используя функцию incremental, которая выглядит следующим образом:

var incrementalFunction = function(numOfSpins) { 
    if (numOfSpins == 1) { 
     return 1; 
    } 
    return 0; 
}; 

Это работало большим на первом, но вызвал еще один вопрос. Рядом с каждым вновь созданным текстовым полем я сделал кнопку «удалить», которая удалит элемент и уменьшит счетчик. Но когда я вызываю метод stepDown, по какой-то причине это вызывает мою инкрементную функцию с увеличением numOfSpins каждый раз, когда он был вызван. Таким образом, это будет только уменьшаться один раз.

У кого-нибудь есть более прямое решение, препятствующее пользователю удерживать кнопки увеличения/уменьшения (или стрелки вверх/вниз на клавиатуре)?

Answer 1

При обновлении до JQuery UI 1.10, проблема исчезнет. См. https://github.com/jquery/jquery-ui/commit/0d53fbfd0b7651652601b3b8577225ab753aab44, который вызывает stepUp() и stepdDown(), чтобы вести себя так, как вы ожидали.

Answer 2

Если вы используете событие stop, вместо таргетинга на каждый шаг вы можете определить, когда был сделан выбор. Затем вы можете сравнить это число с количеством в настоящее время и определить, что делать - удалить или добавить больше. Попробуйте это:

var targetArea = $("#target_area"); 

targetArea.on("click", ".remover", function() { 
    $(this).closest("div").remove(); 
    $("#input1").spinner("stepDown"); 
}); 

$("#input1").spinner({ 
    stop: function (event, ui) { 
     var $this = $(this); 
     var num = $this.val(); 

     var newTargets = targetArea.find("div"); 
     var difference = num - newTargets.length; 
     if (difference < 0) { 
      newTargets.slice(difference).remove(); 
     } else if (difference > 0) { 
      for (var i = 0; i < difference; i++) { 
       var newTarget = $("<div><input type='text' /><span class='remover' title='Remove'>&times;</span></div>"); 
       targetArea.append(newTarget); 
      } 
     } 
    } 
}); 

DEMO:http://jsfiddle.net/PJpUC/1/