Bootstrap - 如何將輸入文本（類型=數字）控件的寬度減少到 N 個數字空格

Question

我正在尋找一種減少數字類型文本框寬度的方法。 我想根據位數指定此控件的寬度。 例如，我希望這個控件有 6 位寬。

下面是我的代碼。

    <div class="col-md-1 px-0 py-0 mx-0 my-0">
        <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001">
    </div>

https://jsfiddle.net/allankamau/f3cowebh/1/

Answer 1

如果您希望寬度隨所需內容的長度動態變化 javascript，請注意此解決方案僅適用於每個字符為 8px 寬且 18 用於按鈕輸入編號， onkeypress用於通過鍵盤輸入， onchange是用於更改的事件通過輸入按鈕編號：

 <div class="col-md-1 px-0 py-0 mx-0 my-0"> <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001" style="width: 26px;" onkeypress="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';" onchange="this.style.width = (18 + ((this.value.length + 1) * 8)) + 'px';"> </div>

但如果您只需要不更改寬度，您可以使用 CSS 或在您的輸入style="width: 80px;"上使用樣式來設置它 ：

 input { width: 80px; }

 <div class="col-md-1 px-0 py-0 mx-0 my-0"> <input id="metric_domain__input__lowerbound__1" class="checkbox form-check form-check-inline input-sm" type="number" filter_controls_div_name="filter_controls__results__coverage__div" metric_domain__checkbox__ordinal_number="1" step="any" placeholder="0.010001"> </div>