问题描述
我有一个注册表单,想将名字和姓氏字段的长度限制为 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>