สอบถามทำช่องใส่จำนวนแบบมีปุ่ม -, + ด้วย

[eange08]

ทำช่องใส่จำนวน แต่ว่าจะต้องปุ่ม - และ + จำนวนในช่องนี้ได้ด้วย จะต้องเขียนอย่างไรค่ะ
หน้าตาแบบนี้นะคะ

Selection_999(1118).png (649 ไบต์) Viewed 541 times

[eange08]

ทำได้แล้วนะคะ ใช้ HTML และ js
ส่วน HTML

โค้ด: เลือกทั้งหมด

<input type='button' value='-' class='qtyminus' name="qtyminus" id="qtyminus" /> <!-- ปุ่ม - -->
            <input type='number' name='quantity' value='0' class='qty' size="3" /> <!-- ช่องใส่จำนวน -->
            <input type='button' value='+' class='qtyplus' name='qtyplus' id='qtyplus'  /> <!-- ปุ่ม + -->

CSS

โค้ด: เลือกทั้งหมด

input#qtyminus,input#qtyplus {
    background: #F9F9F9;
    height: 40px;
    width: 25px;
    border-color: #DDDDDD;
    color: #666666;
}
input.qty {
    height: 40px;
    text-align: center;
    margin:0 -3px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #DDDDDD;
    border-top-color: #DDDDDD;
    color: #333333;
        width: 4em;
}
/*ทำให้ปุ่มขึ้นลงซ่อน ถ้าเป็น input[type=number] */
input.qty::-webkit-outer-spin-button,  
input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
      padding: 0px 0px 0.2em 0em !important;
}

JS

โค้ด: เลือกทั้งหมด

$('.qtyplus').click(function(e){  //ถ้ากดปุ่ม + จะเป็นการเพิ่มจำนวน
    e.preventDefault();
    console.log('+');
    var currentVal = parseInt($('input[name="quantity"]').val());
    // If is not undefined
    if (!isNaN(currentVal )) {
        // Increment
        $('input[name="quantity"]').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[name="quantity"]').val(0);
    }
});
$(".qtyminus").click(function(e) {    //ถ้ากดปุ่ม - จะเป็นการลดจำนวนและดักต่ำสุดที่ 0 ด้วย
    e.preventDefault();
    console.log('-');
    var currentVal = parseInt($('input[name="quantity"]').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name="quantity"]').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name="quantity"]').val(0);
    }
});

ผลลัพท์ที่ได้

Selection_999(1142).png (662 ไบต์) Viewed 389 times