使用 Rails 4 Ruby 2 的整数输入字段答案

【问题标题】：Integer Input Fields Using Rails 4 Ruby 2使用 Rails 4 Ruby 2 的整数输入字段
【发布时间】：2014-07-14 21:54:51
【问题描述】：

我已将一个字段添加到定义为整数的数据库中。我计划将我的字段用作控制器方法中的记录计数。我有数据库模型已经存在的维护视图。我想在现有视图上定义一个输入字段，以将该字段作为整数输入和处理。

我猜测并尝试了以下代码，因为文本字段被定义为 text_field。但是，我得到了一个带有向上/向下箭头的输入字段，就像它试图滚动一个没有滚动的列表一样。默认值出现但呈灰色显示。不知道这意味着什么。

<%= f.label :broadcasts_in_week, "Broadcasts Per Week:" %>&nbsp;<%= f.number_field :broadcasts_in_week %>

我一直在搜索，但只有在使用我不使用的 simple_form 时才能找到它。我发现的所有其他内容都谈到了如何将文本转换为整数。我希望能够在我的视图中输入一个数字并执行 update_attributes(my_params)。

我会继续寻找。

【问题讨论】：

标签： ruby-on-rails ruby html ruby-on-rails-4 integer

【解决方案1】：

我继续寻找并找到了解决方案。再次考虑这一点后，我意识到我已经正确编写了 HTML5 代码，但只需要更改 CSS。我没有意识到箭头被称为旋转按钮。我在样式表中添加了以下 CSS 代码，让它看起来像我想要的那样，并且能够使用我现有的控制器代码来更新整数字段。

/* hides the spin-button for firefox */
input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance:textfield;
    -o-appearance:textfield;
    -khtml-appearance:textfield;
}
/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

我还在样式表的另一部分为文本颜色和宽度添加了 CSS。

【讨论】：