自定義數字輸入

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; }; 
} 

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

Answer 2

嘗試HTML5 input type number：

<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; 
} 

見fiddle