javascript - カスタム数値入力

Question

乾杯！私はフロントエンドが苦手なので、デザイナーのぞき見、これに似た入力を実現する方法を知っていますか？何から始めればよいですか？

Answer 1

これがその方法の非常に基本的な例です。もちろん、スタイルを変更し、必要に応じて要素を調整する必要があります。ただし、アイデアは理解できるはずです。

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/

Answer 2

html5入力タイプ番号を試してください：

<input type="number"/>

Firefoxのサポートが不足しています:(

編集：またはJakubが提案したようにあなたのものを作成してください：

 <input type="text" id="numberInput" value="1"/>
 <input type="button" id="btnIncrement" value="increment" onclick="increment();" />
 <input type="button" id="btnDecrement" value="decrement" onclick="decrement();" />

function increment(){
    var input = document.getElementById('numberInput');
    input.value = parseInt(input.value) + 1;
}

function decrement(){
    var input = document.getElementById('numberInput');
    input.value = parseInt(input.value) - 1;
}

フィドルを見る