自定义数字输入 [英] Custom numeric input

问题描述

干杯！我的前端不好，所以，设计师窥视一下，您有什么想法要实现类似的输入，我应该从什么开始呢?

解决方案

以下是 最基本的示例 .当然，您需要更改样式并根据需要调整元素.但是，这个想法应该是可以理解的.

HTML:

<div class="spin"><span>&ndash;</span><input value="0" /><span>+</span></div>

CSS:

.spin {
    display: inline-block;
}
.spin span {
    display: inline-block;
    width: 20px;
    height: 22px;
    text-align: center;
    padding-top: 2px;
    background: #ff0;
    border: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.spin span:first-child {
    border-radius: 4px 0 0 4px;
}
.spin input {
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: bold;
}

JavaScript:

var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
    var spin = spins[i],
        span = spin.getElementsByTagName("span"),
        input = spin.getElementsByTagName("input")[0];

    input.onchange = function() { input.value = +input.value || 0; };
    span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
    span[1].onclick = function() { input.value -= -1; };
}

演示: http://jsfiddle.net/fPQvK/

Cheers! I'm not good in front-end, so, designer-peeps, do you have any idea how to realize input similar to this, from what should I start?

解决方案

Here is the very basic example of how it can be done. Of course you need to change the styles and adjust the elements upon your needs. However the idea should be understandable.

HTML:

<div class="spin"><span>&ndash;</span><input value="0" /><span>+</span></div>

CSS:

.spin {
    display: inline-block;
}
.spin span {
    display: inline-block;
    width: 20px;
    height: 22px;
    text-align: center;
    padding-top: 2px;
    background: #ff0;
    border: 1px solid #aaa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.spin span:first-child {
    border-radius: 4px 0 0 4px;
}
.spin input {
    width: 40px;
    height: 20px;
    text-align: center;
    font-weight: bold;
}

JavaScript:

var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
    var spin = spins[i],
        span = spin.getElementsByTagName("span"),
        input = spin.getElementsByTagName("input")[0];

    input.onchange = function() { input.value = +input.value || 0; };
    span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
    span[1].onclick = function() { input.value -= -1; };
}

DEMO: http://jsfiddle.net/fPQvK/

这篇关于自定义数字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！