HTML中美化的number输入框

一个项目中，我们的UI设计师为页面中全部的数字输入框设计了一个漂亮的样式，像这样的：

UI设计师的喜好，就是我们的目标。系统不支持，那就想办法呗。就算累死狗，也得想办法实现。

然而，找遍了百度，没有找到哪个现成的框架里有这样的东西（可能是我见识少，不过确实没找到）。

遇见和解决未知问题，是我辈前进的动力。没有现成的办法，就自己想办法。

办法是：

1. 先准备出符合UI设计的几个图片：

 bg_number_box1.png

bg_number_box2.png

bg_number_box3.png

bg_number_box4.png

这些图片是用来美化输入框的，同时能掩盖输入框的默认样式：谷歌浏览器里的上下按钮、IE浏览器里的X。

2.在页面中插入中规中矩的HTML代码：

<input class="number" type="number" min="1" max="99" />

重点是：class="number"，这个css定义稍后会用到。

（这个项目会用在IE里，IE是不支持数字输入框的，就是input:number，实际运行的时候会跟input:text一样）

3.然后自定义样式：

input.number {
    display: inline-block;
    width: 72px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-image: url(../images/bg_number_box1.png);
    background-repeat: no-repeat;
    background-size: 72px 20px;
    border: none;
    cursor: pointer;
}

    input.number:focus {
        background-image: url(../images/bg_number_box2.png);
        border: none;
    }

这没什么说的，默认背景图片1，获得焦点改成图片2

4.然后添加JS处理点击和数字变更操作：

    $("input.number").attr("readonly", "1").click(function (e) {
        var self = $(this);
        var x = e.pageX - self.offset().left;
        var y = e.pageY - self.offset().top;
        var d = 0;
        if (x <= 20) {
            self.css("background-image", "url(./images/bg_number_box3.png)");
            d = -1;
        }
        if (x >= 50) {
            self.css("background-image", "url(./images/bg_number_box4.png)");
            d = 1;
        }
        if (d != 0) {
            self.val(Math.min(Math.max((parseInt(self.val()) || 0) + d, parseInt(self.attr("min"))), parseInt(self.attr("max"))));
            setTimeout(function () {
                self.css("background-image", "");
            }, 200);
        }
    });

在这段JS代码中，主要思路是：只处理两端区域的鼠标点击事件（点击左边时数字减1，点击右边时数字加1）。

在点击时处理的背景图片变更，只是为了好看，与功能无关。

 

然后，UI设计师的意图就都能实现了。