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>