时间戳

首页 > 解决方案 > Bootstrap - 如何将输入文本（类型=数字）控件的宽度减少到 N 个数字空格

html - Bootstrap - 如何将输入文本（类型=数字）控件的宽度减少到 N 个数字空格

问题描述

我正在寻找一种减少数字类型文本框宽度的方法。我想在位数上指定此控件的宽度。例如，我希望这个控件有 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/

标签： htmlbootstrap-4

解决方案

如果您希望宽度根据您需要的内容的长度动态变化 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>

推荐阅读