it-swarm.cn

如何表示限制为某个数字增量的数字输入

我需要一种将字段值限制为固定增量50的形式,但我不确定以有意义的方式表示该约束的最优雅的方法是什么。

想到的最简单的解决方案是jQuery验证方法,结合了一些与常规文本字段输入绑定的服务器端逻辑。我想到的其他替代方法是某种数字选择器(目前尚不知道),它以设置增量或带有固定数量值的下拉列表前进。

还有其他想法吗?您觉得最直观的是什么?

14
Nathan Taylor

我建议使用在Safari中为HTML5实现的方法。如您所见 here HTML5中还有一些具有新属性的新输入类型。在这种情况下,您将使用数字的输入类型,并带有一个名为“ step”的属性。代码如下所示:

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

现在,没有很多浏览器可以执行此操作。但是,如果您在Safari中(使用HTML5 doctype)查看该代码,则看到的是普通文本输入字段,该控件的侧面带有向上/向下箭头,可将字段内的值增加“ step”值您分配的。

因此,对于UI元素,我会将其复制给尚不支持该元素的浏览器,在输入字段旁边添加一个向上/向下箭头。为了让用户知道您期望一个特定的值,您可以编写“请输入50的倍数。例如:0、50、100、150等”。然后,显然,您将需要客户端或服务器端代码来验证输入的数字在这些范围内。

9
RussellUresti

使用滑块。大多数UI库都提供滑块控件,并且通常为您提供定义“步长”(例如50)的选项,将选择限制为该值的任何倍数。

如果您使用的是HTML5,则输入标记具有“范围”类型(包括step属性),大多数支持HTML5的浏览器都应支持该类型: http://dev.w3.org/html5/markup/input。 range.html

7
Rahul

目的是什么?

如果与会计/数学/数字有关,我建议乘数。这样您会看到“ x 50”,并显示总数。如果对于逻辑应用程序,增量为50,那么为什么不仅仅使用“增量50”呢?

4
Susan R

我认为最好使用其他人建议的范围滑块。或者,您可以在输入框中使用自动完成功能,当用户开始输入内容时会显示建议。这是这两种方法的跨浏览器示例。

滑块:http://jqueryui.com/demos/slider/#range

自动完成:http://jqueryui.com/demos/autocomplete/

1
Surendra Vikram Singh

它实际上也取决于最小值和最大值。

我仅使用常规选择列表来显示可能的值。另一种解决方案是仅以简单的方式显示总计,以便用户可以自己输入乘数,但仍然可以看到结果。

mockup

下载bmml源 –使用 Balsamiq Mockups 创建的线框

1
Nick P