使用JavaScript和HTML构建自己的计数器小部件

建筑形式可以是重复性的工作。 通常，特定的表单元素在广泛的表单中始终出现。 这些元素适合作为可在不同表单应用程序中重复使用的组件进行创建。

表单的这种重复要求之一是数字字段。 许多形式包括至少一个字段，该字段可以接受出现在一定范围内的数值，并四舍五入为整数（即​​，不允许小数）。

富客户端应用程序具有这样的小部件—一个文本字段，后跟“上”和“下”箭头，允许用户增加或减少该字段的值。 VB.NET将此小部件称为NumericUpDown 。

为了以纯HTML格式提供此功能，我们可以使用一个包含所有可能值的下拉列表作为选项。 但是，此解决方案有几个缺点：

• 如果您需要用户从大量数字中进行选择，则下拉列表可能会变得很长。 用户可能必须滚动列表，并花费大量时间才能达到所需的价值。
• 您需要大量的标记才能生成下拉列表。

更好的选择是允许用户在一个简单的文本字段中输入值，并在后端验证其输入。

我们需要使用后端验证，因为我们不能依赖用户系统上JavaScript的可用性。 但是，我们可以使用JavaScript来避免麻烦的页面重新加载，并将简单的文本字段变成“计数器”窗口小部件。

演示页面中的字段由脚本增强，该脚本创建链接以在Javascript可用时增加或减少字段值。 要访问本文介绍的所有代码，请在此处下载代码档案 。

怎么运行的

为了实现所需的功能，我们需要做的就是将文件createcounter.js嵌入我们的HTML文档中：

<script type="text/javascript" src="createcounter.js"></script>

我们还需要向要成为计数器的每个文本字段添加一个特殊的ID：

<input type="text" size="3" name="passengers_ctr_1_12" id="passengers_ctr_1_12" value="1" />

（名称属性保留在代码中，以确保向后兼容。）

ID的语法如下：

(any name)_ctr_(minimum value)_(maximum value) 

foo_ctr_0_10 

Allows integer values between 0 and 10 for foo 

bar_ctr_-10_10 

Allows integer values between -10 and 10 for bar 

baz_ctr_1_999 

Allows integer values between 1 and 999 for baz

除了ID以外，我们还可以使用带有适当名称空间的类name或bespoke属性。 但是，使用ID可以使我们在后端（例如在PHP中）复制相同的验证。

一些开发人员可能不喜欢将标记和业务逻辑混合在一起，但是这使我们不必从后端脚本中的JavaScript代码复制规则。

JavaScript自动：

• 检查条目是否为数字，整数并在指定范围内
• 加载页面时检查计数器元素的值
• 单击增加链接时检查并增加值
• 单击减少链接时检查并减小该值
• 用户输入文本并离开字段后检查值

如果条目不是数字，或者低于允许的最小值，则脚本会将值设置为最小值。 如果条目大于最大值，则脚本会将其设置为最大值。

自定义小部件

类counterlink链接应用于通过此解决方案生成的链接。 因此，可以通过CSS自定义链接。 要自定义类名称和显示的链接文本，请如下设置变量：

var linkclass='counterlink'; 

var addtext='+'; 

var subtext='-'; 

var addbefore=true;

变量addbefore定义递减链接的位置。 值为true在文本字段之前应用链接。 值为false时，在文本字段之后的递增链接旁边对其进行定义。

解决方案的缺点

在不依赖鼠标的情况下，HTML，CSS和JavaScript可以带给我们很多。 真实的计数器小部件允许用户通过光标键增加和减少值，并在用户按住任一箭头按钮的时间越长时加快滚动速度。

可能存在一种允许在某些浏览器环境中使用此功能的解决方案，但值得怀疑的是，它能否在所有现代浏览器中都能正常工作。

From: https://www.sitepoint.com/counter-widgets-javascript-html/