HTML中美化的number输⼊框
⼀个项⽬中，我们的UI设计师为页⾯中全部的数字输⼊框设计了⼀个漂亮的样式，像这样的：
UI设计师的喜好，就是我们的⽬标。系统不⽀持，那就想办法呗。就算累死狗，也得想办法实现。
然⽽，遍了百度，没有到哪个现成的框架⾥有这样的东西（可能是我见识少，不过确实没到）。
遇见和解决未知问题，是我辈前进的动⼒。没有现成的办法，就⾃⼰想办法。
办法是：
1. 先准备出符合UI设计的⼏个图⽚：
好看的css代码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设计师的意图就都能实现了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。