限制字符在输入html标记处显示

Question

如何限制在输入标签上显示的字符？ 我是从服务器上获取这种格式的时间：hh:mm:ss，我希望用这种格式展示一些内容hh:mm，有办法获得它吗？
我尝试使用maxlength，尺寸为chrome，但我无法得到它..

<input id="timetable_start" name="start" type="text" value="07:31:00" maxlength=5 pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$" size=5>

http://jsfiddle.net/8FtAX/

Answer 1

如果您无法控制传入的数据，可以使用javascript来显示您想要的内容，使用jquery + timeentry.js可以轻松完成并获得更多功能：

$(function () {
    $("#timetable_start").timeEntry({show24Hours: true});
});

在此尝试：http://jsfiddle.net/cespinoza/e3anw/10/

Answer 2

它正在发挥作用。

尝试更改初始值，来自：

value="07:31:00"

为：

value="07:31"

Answer 3

您应该真正处理数据服务器端（例如，通过将字符串截断为特定长度），以便HTML文档中的数据是您要显示的内容。但如果这是不可能的，您可以使用size属性以字符指定文本输入框的可见宽度（正如您所尝试的那样）和将字体设置为等宽字体，例如与

size="5" style="font-family: Consolas, Lucida Console, monospace"

已添加到input标记中。关键是“字符的宽度（平均）”除了等宽字体外没有明确的含义，浏览器传统上以相同的方式实现size属性，除了等宽字体。

但是，请注意，提交时发送的表单数据可用于客户端脚本，并且如果支持pattern属性，则使用浏览器进行检查仍然是您在{{{ 1}}属性。因此，用户需要猜测并删除“隐形”部分。这听起来像是可用性的噩梦。