在 input 文本框上创建 数字 控制台

一、数字组件的实现

1、借助Html中的input文件框构建基础的数字编辑控件，其基本功能需求如下

① 当用户点击该控件时，能够自动选中其中的文本内容；

② 允许用户输入数字，并具备数值范围限制功能，同时禁止非数字字符的输入；

③ 通过键盘的方向键（包括上、下、左、右）实现数值的快速增减操作；

④ 当鼠标移出该组件时，系统会根据设定的数值范围进行自动校验并调整数值：若超出范围，则将其修正为最接近的有效值。

2、以时间组件中的小时部分为例，其具体实现逻辑如下：

（1）获取焦点：监听focus事件，触发后将文本内容全部选中；

（2）失去焦点：监听blur事件，在此过程中对输入文本进行有效性验证，并将其自动调整为0至23之间的有效值；

（3）键盘输入：监听keydown事件。

① 按下↑或→键时，当前数值递增，若超过59则重置为0；

② 按下↓或←键时，当前数值递减，若低于0则调整为59；

③ 仅允许输入数字字符，对于非数字字符将阻止其输入；

3、相关脚本的具体实现方式如下

 NumberControl = {

    
     /** *   selector：选择器
    
     *   minValue：最小值，默认值0
    
     *   maxValue: 最大值，可选
    
     */