javascript: binario/hexadecimal (o cualquier otra base) para actuar como tipo de entrada=número

Al utilizar cualquier navegador que no sea un dispositivo móvil, la entrada de números tiene muchas funciones para cambiarla además de escribir un número: -Presionar las teclas de flecha hacia arriba aumenta el valor y las teclas de flecha hacia abajo lo disminuyen. Si se mantiene presionado, aumentará o disminuirá paso a paso; el valor predeterminado es 1 (entero) rápidamente. Además, en la mayoría de los navegadores, al seleccionarlo se mostrarán dos botones adicionales a la derecha para aumentarlo y disminuirlo (y al mantenerlos presionados también aumentará/disminuirá rápidamente):

Sin embargo, esto sólo funciona con números decimales. No existe un método para tener un campo para ingresar, digamos números hexadecimales. Existe una versión de texto (<input type="text">) que permite al usuario ingresar cualquier carácter en él, y JavaScript puede analizar el texto en un número.(o bigint) usando expresiones regulares antes de la conversión. Pero eso no se comportará como un número ya que es una entrada de texto de “propósito general”.

Entonces mi pregunta es, ¿cómo hago para que una entrada, que es un texto, se comporte como un número pero acepte una base determinada (no conozco el código, pero reacciona hacia arriba/abajo y las características aumentan? /disminuir y se puede mantener presionado para un cambio continuo)? Tener la capacidad de aumentar/disminuir un número hexadecimal sería excelente para crear HTML que haga cosas similares a las de un programador, como matemáticas de color o algo relacionado con datos de software.

------------------------------------

Resuelto (pero parcialmente). Aquí hay una plantilla, solo esta.funciona con bigint a menos que lo edite para admitir números (punto flotante de doble precisión). No creo que la flecha hacia arriba y hacia abajo a la derecha de la entrada sea posible:

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

Pero hay un problema: al presionar hacia arriba siempre aparece el cursor (cursor de texto parpadeante) al principio de la línea. Al ingresar un número, esto siempre lleva el cursor al final, tanto al presionar hacia arriba como hacia abajo.

------------------------------------

¡SÍ! Está solucionado. Perdón por agregar otra respuesta, stackoverflow tiene un error que no me permite agregar más texto en la publicación anterior. Esto aquí pretende incluir una versión mejorada,Encontré una manera de evitar que el cursor vaya al principio de la línea usando 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>