Javascript 如何在使用旋转按钮时限制html输入数值中的最小值/最大值

我有一个html输入控件，我想在其中“扼杀”超过最小值或最大值的输入值，包括，如果用户使用旋转按钮

我在一个角度应用程序中使用它（我使用一个属性），但更多的是关于输入控件

我知道我可以使用type=“text”删除按钮，但我想保留它们

使用来自的一个答案，我有以下几点

    import { Directive, ElementRef, Input, OnInit } from '@angular/core';
    import { Utils } from '../utils';

    @Directive({
        selector: '[appInputIntOnly]'
    })
    export class InputIntOnlyDirective implements OnInit {
        /** Pass "true" to show the numeric spinner */
        @Input() showSpinner: string;
        
        /** Set to set a min value */
        @Input() min: string;

        /** Set to set a max value */
        @Input() max: string;

        private convertedMin: number;
        private convertedMax: number;
        
        private htmlElement: HTMLInputElement;

        /**
         * Construction
         * @param el - the element this attribute is attached to
         */
        constructor(el: ElementRef) {
            this.htmlElement = el.nativeElement as HTMLInputElement;    
            this.htmlElement.maxLength = Number.MAX_SAFE_INTEGER.toLocaleString().length - 1;
            this.htmlElement.onkeypress = ev => this.validate(ev);
            this.htmlElement.onpaste = ev => this.validate(ev);
            this.htmlElement.onmousedown  = ev => this.validate(ev);    
        }

        
        public ngOnInit(): void {
            this.htmlElement.type = this.showSpinner === 'true' ? 'number' : 'text';
            if (this.min !== undefined) {
                this.convertedMin = Utils.toInteger(this.min); // ie parseInt
            }

            if (this.max !== undefined) {
                this.convertedMax = Utils.toInteger(this.max);
            }
        }
            
        private validate(evt: any): void {
            const theEvent = evt || window.event;
            
            let key;    
            let valueToTest = Utils.toInteger(this.htmlElement.value);
            let testKey = true;
            if (valueToTest == undefined)
                valueToTest = 0;
            
            if (theEvent.type === 'paste') {
                key = theEvent.clipboardData.getData('text/plain');
            }
            else if (theEvent.type == 'onmousedown') {
                testKey = false;                    
                valueToTest++; // <-------  But this is wrong for down spin button!!!
            }
            else {
                // Handle key press
                key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            
            // If no this.htmlElement.value, then the range is 1 to 9 to disallow 0
            const regex = this.htmlElement.value ? /[0-9]/ : /[1-9]/;
            let isValid = testKey ? regex.test(key) : true;
            if (isValid && this.convertedMin !== undefined) {      
                isValid = valueToTest >= this.convertedMin
            }

            if (isValid && this.convertedMax !== undefined) {      
                isValid = valueToTest <= this.convertedMax;
            }

            if (!isValid) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault)
                    theEvent.preventDefault();
            }        
        }
    }

当然，

valueToTest++

只适用于向上箭头

我就是找不到一个属性或事件来区分向上和向下旋转按钮

是否有方法进行最小/最大验证，包括使用旋转按钮

提前感谢。

我想您也可以处理

（输入）

事件来捕获旋转按钮。

（keydown）

和

（input）

的组合应该满足您的用例

  else if (theEvent.type == 'onmousedown') {
     testKey = false;

     // But this is wrong for down spin button!!!
     valueToTest++;