Hướng dẫn tạo button tăng giảm số lượng

Hướng dẫn tạo button tăng giảm số lượng phù hợp trong quá trình thiết kế giao diện blogger bán hàng

Hướng dẫn tạo button tăng giảm số lượng

Mặc định thẻ input type number thì có sẵn chức năng tăng giảm số lượng các bạn có thể dùng như sau


<input type="number" id="quantity" name="quantity"/>


Và chúng ta có thể tùy biến HTML để có 2 button tăng giảm được viết:


<input onclick="var result = document.getElementById('quantity'); var qty = result.value; if( !isNaN(qty) &amp; qty > 1 ) result.value--;return false;" type='button' value='-' />
<input id='quantity' min='1' name='quantity' type='text' value='1' />
<input onclick="var result = document.getElementById('quantity'); var qty = result.value; if( !isNaN(qty)) result.value++;return false;" type='button' value='+' />

Demo: 


Nhận xét

×