数字字段上的Shift+向上箭头行为

Shift + up arrow behaviour on number field

本文关键字：Shift+ 字段 数字      更新时间：2023-09-26

我有一个要求，在html数字字段上按Shift+上/下箭头键时需要跳10，有人知道是否有任何现有的解决方案或任何方法吗？

任何形式的建议或帮助都将不胜感激。

[EDITED]您可以使用下面的代码段来实现这一点

查看此JSFiddle演示：https://jsfiddle.net/ctkt66a0/9/

HTML:

<label for="user_lic">Number of user license : </label><input id="user_lic" type="text" value ="5" />

Javascript

window.onkeyup = function(e) {
    if (e.keyCode == 38)
    {
        if (e.shiftKey === true)
        {
            // new line
            //alert('yes');
                        var valu = parseInt($('#user_lic' ).val()) + parseInt(10);
            //alert(valu);
            $('#user_lic').val('');
            $('#user_lic').val('').val(valu);
        }
        else
        {
            // run your function
        }
        return false;
    }
    else if (e.keyCode == 40) {
        if (e.shiftKey === true)
        {
            // new line
            //alert('yes');
                        var valu = parseInt($('#user_lic' ).val()) - parseInt(10);
            //alert(valu);
            $('#user_lic').val('');
            $('#user_lic').val('').val(valu);
        }
        else
        {
            // run your function
        }
        return false;
    }
}

HTH

这里的答案有点奇怪，这是我经常想知道的问题（当然应该内置！）。

这个代码在每个数字输入中循环。如果你没有按下shift或向上或向下键，它会提前退出，如果输入值为空，它会先给它一个值0（因为你不能从空字符串中加减）。它是一个封装在自调用函数中的函数，因此我可以包含UP和DOWN常量。

(function(){
  const UP = 38;
  const DOWN = 40;
  Array
    .from(document.querySelectorAll("input[type='"number'"]"))
    .forEach( input => {
      input.addEventListener("keydown", (e) => {
        if(!e.shiftKey || (e.keyCode != UP && e.keyCode != DOWN)){
          return;
        }
        e.preventDefault();
        if(input.value == ""){
          input.value = 0;
        }
        if(e.keyCode == UP){
          return input.value = parseFloat(input.value) + 10;
        }
        if(e.keyCode == DOWN){
          input.value = parseFloat(input.value) - 10;
        }
      });
    })  
})();

举个例子：

https://codepen.io/EightArmsHQ/pen/bfde2271e0bf3eeaab347b4eeac06efe?editors=0010

检查此JsFiddle Demo

可以使用step属性

相关文章：