（已解决）二进制/十六进制（或任何其他基数）的行为类似于输入类型=数字

Question

Using any browser that isn't a mobile device, number input has many features of changing it besides typing a number into it: -Pressing Up on the arrow keys increases the value, and down arrow keys decreases it. If held down, it will increase or decrease by step , default at 1 (integer) rapidly. Additionally, on most browsers, when selecting it will show two additional buttons to the right to increment and decrement it (and holding down those as well will increase/decrease rapidly):

However, this only works with decimal numbers. There isn't a method of having a field to enter, say hex numbers. There exist a text version ( <input type="text"> ) that allows the user to enter any character in it, and a JavaScript can parse the text into a number (or bigint) using regex prior conversion. But that will not behave like a number since it is a “general-purpose” text input.

So my question is, how do I make an input, that is a text, to behave like a number but accepts a given radix (I don't know the code, but it reacts to up/down, and features increase/decrease, and can be held down for continuous change)? Having the ability to increase/decrease a hex number would be great for making HTML that does things that are programmer-like stuff such as color math or something related to software data.

Answer 1

Solved (but partially). Here is a template, this only works with bigint unless you edit it to support number (double-precision floating point). I don't think the up and down arrow to the right of the input is even possible:

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

But there is one problem: Pressing up always brings the caret (blinking text cursor) to the beginning of the line. On a number input, this always bring the caret to the end, on both pressing up and down.

Answer 2

YES. It is solved, Sorry for adding another answer. stackoverflow is having a bug that wouldn't let me add more text in the previous post, This here is meant to include an improved version: I found a way to prevent the caret from going to the beginning of the line by using 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',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 == "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>