基于input文本框实现的数字控件

来源：互联网发布：前列腺高潮叙述知乎编辑：程序博客网时间：2024/05/29 10:28

一、数字组件的实现

1、使用Html的input文件框实现简单的数字编辑控件，基本要求如下

① 点击控件，选中文本；

② 可输入数字，支持数值范围限制，不允许非数字字符输入

③ 键盘方向键（上下左右）可快速增减数值

④ 鼠标离开组件时，根据数值范围自动验证并调整值：超出范围时调整为最近最合适的值

2、以时间组件的小时，实现思路如下

（1）获取焦点：响应focus事件，选中全部文本

（2）失去焦点：响应blur事件，验证文本范围，自动调整为0~23

（3）键盘输入：响应keydown事件。

① ↑→键，数增加，超过59恢复0；

② ↓←键，数减小，低于0变59；

③ 只允许数字，非数字阻止输入；

3、脚本实现如下

NumberControl = {    /**    *   selector：选择器    *   minValue：最小值，默认值0    *   maxValue: 最大值，可选    */    bind: function (selector, minValue, maxValue) {        var $el = $(selector), minValue = minValue || 0, me = this,            isCircle = (!!minValue || minValue == 0) && (!!maxValue || maxValue == 0),            numSpan = isCircle ? maxValue - minValue + 1 : 0;        //focus：获取焦点时选中文本        $el.focus(function () { this.select(); });        //blur：失去焦点时调整数字        $el.blur(function () {//验证            var num = me.intValue($(this).val());            num = num < minValue ? minValue : num > maxValue ? maxValue : num;            $(this).val(num);        });        //key：限制输入，根据方向键调整大小        $el.keydown(function (e) {            if (e.keyCode == 38 || e.keyCode == 39) {//右上：增加                var num = me.intValue($(this).val());                num = numSpan == 0 ? num : (num + 1) % numSpan;                $(this).val(num).select();            } else if (e.keyCode == 37 || e.keyCode == 40) {//左下：减少                var num = me.intValue($(this).val());                num = numSpan == 0 ? num : (num + numSpan - 1) % numSpan;                $(this).val(num).select();            } else if (e.keyCode == 9) {                return true;//tab键            } else if (48 <= e.keyCode && e.keyCode <= 57) {//数字0~9                return true;            }            return false;        });        return $el;    },    /* 获取整数：num表示数字或数字字符串，defvalue表示在转换失败时指定的默认值，默认0 */    intValue: function (num, defvalue) {        var defvalue = defvalue || 0, value = parseInt(num);        return isNaN(value) ? defvalue : value;    }}

二、应用：实现时间控件

实现hh:mm格式是时间格式控件。这里的“hh”、“：”、“mm”分别是三个input标签拼接而成，修改border样式使三个input看起来像一个文本框。

效果图如下：

1、时间控件的html

<body>    <div>        <span>时间:</span> <span><input class="time th" style="border-right:0;" type="text" maxlength="2" value="00" /><input class="time" style="width:7px;border-left:0;border-right:0;" tabindex="-1"  readonly="true" value=":" /><input class="time tm" style="border-left:0;text-align:center;" maxlength="2" value="00"/></span>    </div></body>

css样式如下：

        .time        {            height:20px;            width:18px;            border:#ccc 1px solid;            margin:0;            text-align:center;        }

2、使用数字组件

        $(function () {            NumberControl.bind(".th", 0, 23);            NumberControl.bind(".tm", 0, 59);        });

3、应用扩展：基于数字组件，还可以实现日期 “2016/1/7” 这样的基本文本的控件

三、总结

在实现时间控件中遇到一些问题及解决方案如下：

1、input标签之间有间隙：“小时”、“:”、“分钟”这三个input标签拼接在一起要像一个文本框一样，就不能有间隙。

在上面提供的html源代码已解决这种问题。需要注意的是，三个<input>标签之间不要使用换行。另一种解决方案，input之间可换行，但是要在前一个input标签上的样式中使用float:left也可解决问题。

2、焦点切换：使用tab键在"小时"“分钟”两个input中切换，但不允许在":"input上获取焦点。解决办法是：在“小时”与“分钟”之间的那个input标签，指定属性tabindex="-1"，在使用tab键时，就不会在“：”分隔符input上聚焦。

0 0