在 html 输入中设置 maxlength 而不更改表单宽度？ 参考

如何解决在 html 输入中设置 maxlength 而不更改表单宽度？ 参考

我有一个注册表单，想将名字和姓氏字段的长度限制为 50 个字符。

问题是，当我这样做时，表单显示得更宽。

如何确保用户在这些表单字段中输入的字符不能超过 50 个而不会影响表单的宽度？

参考

这是之前和之后的代码/结果（唯一的变化是向表单助手添加了 maxlength: 50。

之前：

<div class="row">
  <div class="col-6">

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name,autofocus: true,autocomplete: "First Name",class: "form-control" %>
    </div>

  </div>

  <div class="col-6">
    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name,autocomplete: "Last Name",class: "form-control" %>
    </div>
  </div>
</div>
<br>

之后（太宽）：

<div class="row">
  <div class="col-6">

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name,maxlength: 50,class: "form-control" %>
    </div>
  </div>
</div>
<br>

解决方法

我没有意识到，但是当 rails 看到 maxwidth: 50 时，它会自动添加：size: 50。

我只是在表单字段助手中添加了一个 size: 25，这些字段的宽度变为 25 而不是 50

<div class="row">
  <div class="col-6">

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name,maxlength: 50,size: 25,autofocus: true,autocomplete: "First Name",class: "form-control" %>
    </div>

  </div>

  <div class="col-6">
    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name,autocomplete: "Last Name",class: "form-control" %>
    </div>
  </div>
</div>
<br>