覆盖stepUp和stepDown

Question

是否有可能覆盖html5 stepUp和stepDown行为？我不想创建新按钮，我想使用输入提供的控件。我一直试图以这种方式覆盖它们：

document.getElementById("elemId").stepUp = function() { }

但它似乎无法发挥作用。

Answer 1

我建议您不要覆盖您观看更改事件，然后执行任何操作。

话虽如此，有两种方法可以覆盖这种行为。假设以下html

<input id="num" type="number" value="0" step="1" min="0" max="100"/>

让我们得到一个数字输入的参考：

// Access the spinner
var spinner = document.getElementById("num");

现在，如果要覆盖所有stepUp()函数，可以使用HTMLInputElement对象：

// Override all spinner's setup functions
HTMLInputElement.prototype.stepUp = function(num){
    console.log('All overridden: Stepping up '+num);
};

虽然您也可以仅覆盖该输入的stepUp()函数：

// Override only that spinner's stepUp function
spinner.stepUp = function(num){
   console.log('Stepping up '+num);
};

要查看此操作示例，请打开this jsFiddle。