有没有办法只允许使用输入类型="数字"上的微调控件进行输入？

Question

我想限制用户只能使用在HTML5中提供输入类型="数字"的微调器来更改框的内容,并且无法在框中键入任何内容

<input type="number" min="0" value="0" step="5"/>

我可以这样做吗？

(我的目标受众只会使用Chrome,因此不会出现在IE(9)和Firefox(13)上的微调器不是问题)

Answer 1

您可以onkeydown在此处使用Javascript 事件...这将阻止用户键入任何内容,并且他仍然可以使用箭头控件来增加和减少数字.

<input type="number" min="0" value="0" step="5" onkeydown="return false" />

Demo

注意:只是不依赖于JavaScript和HTML,始终要进行服务器端验证,以确保用户没有发布任何恶意输入.可以通过在文本框中添加任何文本来禁用Javascript并且用户可以滥用,但是没有其他方法可以阻止他,因此也要保持服务器端检查.

正如您所评论的那样,您也希望禁用文本选择,这样用户就不会感到困惑,您也可以在这里使用CSS定位技术,正如您所说的那样,目标用户只是Chrome,所以没有太多的跨浏览器问题,所以你可以这样做......

Demo 2

使用input元素包装span元素,只需使用CSS定位技术和:after伪,我们将虚拟元素覆盖在input.

现在我只是为了演示目的而保留大纲,你可以安全地删除它们.

span {
    position: relative;
    outline: 1px solid #00f;
}

span:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    outline: 1px solid red;
    width: 91%;
}