如何在輸入類型=「輸入」內添加旋轉按鈕

我想爲input type="input"內的<div>標記添加一個僅用於數字輸入字段的標記。我知道它不能完成，但我想知道是否有某種方法在不是input type="number"的輸入字段中添加+和 - 按鈕。由於我不會涉及的原因（我花了兩天的時間才解決問題），我無法使用input type="number"。如何在輸入類型=「輸入」內添加旋轉按鈕

如何爲不帶旋轉按鈕的input定製旋轉按鈕？ SO上的大多數其他問題都是關於樣式/隱藏數字輸入中的旋鈕。

來源

2017-02-15 patrickhuang94

您是否嘗試過https://codepen.io/komarovdesign/pen/PPRbgb/？ –

這是修改輸入類型=「數字」。我不想修改它，因爲我沒有旋轉按鈕。 – patrickhuang94

而不是通過創建這個自定義元素重新發明輪子，爲什麼不問「我爲什麼不能在我的實現中使用'type =」number「'？這似乎是更大的問題。 –

我建議你做包含的側面上輸入號碼的大格，並在另一側，使其中包含一個兩個按鈕在其他的頂部的另一個DIV 。

來源

2017-02-15 18:52:30

我剛剛提出了這個解決方案 - 感謝您抽出時間，並在圖片中描繪它:) – patrickhuang94

您可以使用美元符號的僞元素，而不是添加額外的標記。 –

既然你不能使用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>

來源

2017-02-15 18:48:30

如果由於某種原因，你不要添加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和邊緣工作。（未在其他瀏覽器上測試過）。

Credits to this。

來源

2017-02-15 19:05:33

如何在輸入類型=「輸入」內添加旋轉按鈕

回答

相關問題