入力タイプ= "入力"内にスピンボタンを追加するには

Question

input type="input"の数字の入力フィールドに<div>タグを追加します。私はそれができないことを知っていますが、入力フィールドの中に+と - ボタンを追加する方法があるかどうか疑問に思っていましたが、それはinput type="number"ではありません。私が入ることができない理由（問題を解決するのに2日かかった）のために、私はinput type="number"を使用することができません。

スピンボタンに付属していないinputのカスタムスピンボタンを作成するにはどうすればよいですか？ SOに関する他の質問のほとんどは、数字入力でスピンボタンのスタイリング/隠蔽について質問しています。

Answer 1

私はあなたの側で入力された番号を含む大きなDIVを作成して、他の側に、他の上にある2つのボタン1を含む別のdivを作成することをお勧め。

Answer 2

あなたには、いくつかの理由でtype="number"を使用することはできませんので、ここで小さなカスタムステッパーです。

var numberSteppers = document.querySelectorAll('.numberStepper input'); 
 
for(var i = 0; i < numberSteppers.length; i++){ 
 
    numberSteppers[i].oninput = function(){ 
 
    this.value = !isNaN(this.value) ? parseInt(this.value) : 0; 
 
    } 
 
} 
 

 
var stepperButtons = document.querySelectorAll('.numberStepper button'); 
 
for(var j = 0; j < stepperButtons.length; j++){ 
 
    stepperButtons[j].onclick = function(e){ 
 
    e.preventDefault(); 
 
    var input = this.parentNode.previousElementSibling; 
 
    input.value = input.value !== '' ? parseInt(input.value) + parseInt(this.value) : parseInt(this.value); 
 
    } 
 
}

.numberStepper, .numberStepper *{ 
 
    box-sizing:border-box; 
 
} 
 

 
.numberStepper{ 
 
    max-width:200px; 
 
    position:relative; 
 
} 
 

 
.numberStepper input{ 
 
    display:block; 
 
    width:80%; 
 
    font-size:2em; 
 
    min-height:3ex; 
 
    padding:1ch; 
 
    text-align:right; 
 
} 
 

 
.numberStepper .steppers{ 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    height:100%; 
 
    width:20%; 
 
} 
 

 
.numberStepper button{ 
 
    margin:0; 
 
    padding:0; 
 
    border:1px solid; 
 
    width:100%; 
 
    cursor:pointer; 
 
    height:50%; 
 
}

<div class="numberStepper"> 
 
    <input type="text"/> 
 
    <div class="steppers"> 
 
    <button value="1">+</button> 
 
    <button value="-1">-</button> 
 
    </div> 
 
</div>

Answer 3

何らかの理由場合はは、あなたがこのソリューションを使用することができ、div Sを追加したり、numberへの入力タイプを変更したくない。

jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input'); 
 
jQuery('.quantity').each(function() { 
 
    var spinner = jQuery(this), 
 
    input = spinner.find('input[type="text"]'), 
 
    btnUp = spinner.find('.quantity-up'), 
 
    btnDown = spinner.find('.quantity-down'), 
 
    min = input.attr('min'), 
 
    max = input.attr('max'); 
 

 
    btnUp.click(function() { 
 
    var oldValue = parseFloat(input.val()); 
 
    if (oldValue >= max) { 
 
     var newVal = oldValue; 
 
    } else { 
 
     var newVal = oldValue + 1; 
 
    } 
 
    spinner.find("input").val(newVal); 
 
    spinner.find("input").trigger("change"); 
 
    }); 
 

 
    btnDown.click(function() { 
 
    var oldValue = parseFloat(input.val()); 
 
    if (oldValue <= min) { 
 
     var newVal = oldValue; 
 
    } else { 
 
     var newVal = oldValue - 1; 
 
    } 
 
    spinner.find("input").val(newVal); 
 
    spinner.find("input").trigger("change"); 
 
    }); 
 
});

.quantity { 
 
    position: relative; 
 
} 
 
input[type=text]::-webkit-inner-spin-button, 
 
input[type=text]::-webkit-outer-spin-button { 
 
    -webkit-appearance: none; 
 
    margin: 0; 
 
} 
 
input[type=text] { 
 
    -moz-appearance: textfield; 
 
} 
 
.quantity input { 
 
    width: 45px; 
 
    height: 42px; 
 
    line-height: 1.65; 
 
    float: left; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
    padding-left: 20px; 
 
    border: 1px solid #eee; 
 
} 
 
.quantity input:focus { 
 
    outline: 0; 
 
} 
 
.quantity-nav { 
 
    float: left; 
 
    position: relative; 
 
    height: 42px; 
 
} 
 
.quantity-button { 
 
    position: relative; 
 
    cursor: pointer; 
 
    border-left: 1px solid #eee; 
 
    width: 20px; 
 
    text-align: center; 
 
    color: #333; 
 
    font-size: 13px; 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif !important; 
 
    line-height: 1.7; 
 
    -webkit-transform: translateX(-100%); 
 
    transform: translateX(-100%); 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 
.quantity-button.quantity-up { 
 
    position: absolute; 
 
    height: 50%; 
 
    top: 0; 
 
    border-bottom: 1px solid #eee; 
 
} 
 
.quantity-button.quantity-down { 
 
    position: absolute; 
 
    bottom: -1px; 
 
    height: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quantity"> 
 
    <input type="text" value="1"> 
 
</div>

このソリューションでは、Chromeとエッジで動作するようです。 （他のブラウザではテストされていません）。

クレジット番号this。