已解决二进制/十六进制或任何其他基数的行为类似于 input type=number

如何解决已解决二进制/十六进制或任何其他基数的行为类似于 input type=number

使用任何非移动设备的浏览器，数字输入除了输入数字外，还有许多改变它的功能： - 按向上箭头键增加数值，向下箭头键减少数值。如果按住不放，会快速增加或减少step，默认为1（整数）。此外，在大多数浏览器上，选择它时会在右侧显示两个额外的按钮来增加和减少它（按住这些按钮也会快速增加/减少）：

然而，这只适用于十进制数。没有一种方法可以输入一个字段，比如十六进制数字。存在允许用户在其中输入任何字符的文本版本 (<input type="text">)，并且 JavaScript 可以使用正则表达式先验转换将文本解析为数字（或 bigint）。但这不会像数字一样，因为它是“通用”文本输入。

所以我的问题是，我如何使输入，即文本，表现得像一个数字但接受给定的基数（我不知道代码，但它对向上/向下做出反应，并且功能增加/ 减少，并且可以按住以进行持续更改）？拥有增加/减少十六进制数的能力对于制作 HTML 来说非常有用，这些 HTML 可以执行类似程序员的事情，例如颜色数学或与软件数据相关的事情。

解决方法

已解决（但部分解决）。这是一个模板，它仅适用于 bigint，除非您对其进行编辑以支持 number（双精度浮点）。我认为输入右侧的向上和向下箭头甚至不可能：

<input type="text" id="tester" class="HexInput"><br>
<input type="text" id="tester2" class="HexInput"><br>
<input type="text" id="tester2" class="SomethingElse"><br>

<script>
        window.onload = function(){    
            var FocusedElement = document.activeElement;
            if(FocusedElement.addEventListener ) {
                FocusedElement.addEventListener('keydown',this.keyHandler,false);
            } else if(FocusedElement.attachEvent ) {
                FocusedElement.attachEvent('onkeydown',this.keyHandler);
            }
        }

        function keyHandler(e) {
            if (((e.keyCode == 38)||e.keyCode == 40)&&(document.activeElement.className == "HexInput")) {
                var target;
                var InputNumber = BigInt(CorrectHexBigIntValue(document.activeElement.value))
                if (!e) var e = window.event;
                if (e.target) target = e.target;
                else if (e.srcElement) target = e.srcElement;
        
                if(e.keyCode == 38) {
                    InputNumber++
                } else if(e.keyCode == 40) {
                    if (InputNumber > 0n) {
                        InputNumber--
                    }
                }
                document.activeElement.value = InputNumber.toString(16).toUpperCase()
            }
        }
    function CorrectHexBigIntValue(String) {
        if ((/^([0-9]|[A-F]|[a-f])+$/).test(String) == false) {
            String = 0n
        }
        return CanConvertHexStringToBigInt = BigInt("0x" + String)
    }
</script>

但是有一个问题：向上按总是将插入符号（闪烁的文本光标）带到行的开头。在数字输入中，无论是按上还是下，这总是将插入符带到最后。

是的！解决了。很抱歉添加另一个答案，stackoverflow 有一个错误，无法让我在上一篇文章中添加更多文本。这里的意思是包含一个改进的版本，我找到了一种方法来防止插入符号进入行首，使用 preventDefault():

<input type="text" id="tester" class="HexNumberInput" onchange="code()"><br>
<input type="text" id="tester2" class="HexNumberInput" onchange="code()"><br>
<input type="text" id="tester3" class="somethingelse" onchange="code()"><br>
<script>
    window.onload = function(){
        var FocusedElement = document.activeElement;
        if(FocusedElement.addEventListener ) {
            FocusedElement.addEventListener('keydown',false);
        } else if(FocusedElement.attachEvent ) {
            FocusedElement.attachEvent('onkeydown',this.keyHandler);
        }
    }

    function keyHandler(e) {
        if (((e.keyCode == 38)||e.keyCode == 40)&&(document.activeElement.className == "HexNumberInput")) {
            var target;
            var InputNumber = BigInt(CorrectHexBigIntValue(document.activeElement.value))
            if (!e) var e = window.event;
            if (e.target) target = e.target;
            else if (e.srcElement) target = e.srcElement;
    
            if(e.keyCode == 38) {
                InputNumber++
                e.preventDefault()  //Prevents the caret (blinking text cursor) from being placed at the beginning of the line.
            } else if(e.keyCode == 40) {
                if (InputNumber > 0n) {
                    InputNumber--
                }
            }
            document.activeElement.value = InputNumber.toString(16).toUpperCase()
            document.activeElement.setSelectionRange(document.activeElement.value.length,document.activeElement.value.length)
        }
    }
    function code() {
        var b = 1 + 1
    }
    function CorrectHexBigIntValue(String) {
        //This converts the user's input hex string (negative numbers not allowed)
        //to BigInt.
        if ((/^([0-9]|[A-F]|[a-f])+$/).test(String) == false) {
            String = 0n
        }
        return CanConvertHexStringToBigInt = BigInt("0x" + String)
    }
</script>