Question

我想限制用户能够使用HTML5中 input type =“number”提供的微调器来更改框的内容，而不是能够在框中输入任何内容

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

我可以这样做吗？

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

Answer 1

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

<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%;
}

Answer 2

可接受的答案使用onkeydown，这也会禁用微调器；在此处有详细记录：https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

您可以使用onkeypress来防止使用charCode键。但MDN表示，按键功能已被弃用。尽管有很好的支持，但建议您不要这样做。 https://caniuse.com/#search=keypress

我的解决方案是拥有自己的功能，以按键代码进行过滤，并在所有其他键代码上使用preventDefault。请注意，updateValue是一个自定义函数。要让微调器完成其工作，您可以在最后使用内联方法。

myInputTag = document.getElementsByTagName('input')[0];

myInputTag.onkeydown = onlyUpDownKeys ;

function onlyUpDownKeys(e) {
(e.keyCode===38 || e.keyCode===40) ? updateValue(e): e.preventDefault(); 
}

这将适用于所有键盘布局。通过https://caniuse.com/#search=.keycode

探索与用户的兼容性

您也可以将其放入HTML的默认内联输入标签定义中，如下所示：

'<input class="tableCell" type="number" min=0 onkeydown = "!(e.keyCode===38 || e.keyCode===40) && e.preventDefault();">';

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

2 个答案: