数字和特殊文本的 HTML 输入 - 用户友好答案

【问题标题】：HTML input for number and special text - user friendly数字和特殊文本的 HTML 输入 - 用户友好
【发布时间】：2015-11-05 18:52:05
【问题描述】：

在我的 html 表单中，inputtag 应该是一个数字（所以我指定了数字类型），但有些数字有特殊含义。就像在天数内到期一样，输入标签可以有任意天数，但如果用户想要指定 No Expiry 我希望 0 作为输入，以便传达我显示占位符文本

1, 2, 30, 0 (No Expiry) etc.

这似乎对用户不友好，因为输入最初可能有一些数字，这会隐藏消息并混淆用户。

另外，我需要输入一个数字但也允许用户跟随值：

Unlimited

我不想让用户输入这个。处理这个问题的最佳方法是什么？

【问题讨论】：

这不是一个真正的编程问题，而是一个用户体验问题。
@thatidiotguy 我认为程序员可能经常遇到这个问题。
我投票结束这个问题，因为这个问题属于用户体验堆栈交换，应该迁移到那个交换
你用过正数，你用过零，只剩下负数...
@Teemu 这就是我发布这个问题的原因。有没有这方面的js库。

标签： javascript html

【解决方案1】：

如果您不必使用输入标签，听起来像下拉菜单。正如您提到的，您不希望用户输入。所以一个简单的下拉菜单是这样的：

<select>
  <option value="0">No Expiry</option>
  <option value="Unlimited">Unlimited</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <!-- more option -->
  <option value="3">3</option>
</select>

你可以在这里看到效果：https://jsfiddle.net/nx1Lt86g/

【讨论】：

我可以有任何号码。
好的，那么听起来自动完成可能会有所帮助，这里有一个来自 jquery ui 的示例：jqueryui.com/autocomplete/#combobox
还有一些来自占位符的帮助。