有没有办法只允许使用输入类型=“数字”的微调控件进行输入？ [英] Is there a way to ONLY allow input using the spinner controls on an input type="number"?

问题描述

我想限制用户仅能够使用HTML5中的 input type =number提供的旋钮来更改框的内容，而不是能够输入任何内容到框中

 < input type =numbermin =0value =0步骤= 5/> 
  

我可以这样做吗？

（我的目标受众只会使用Chrome浏览器，所以不会出现在IE（9）和Firefox（13）上的旋转器不是问题）

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

 < input type =numbermin =0value =0step =5 onkeydown =return false/> 
  

Demo

注意：只要不依赖于JavaScript和HTML，始终有一个服务器端验证来确保该用户没有发布任何恶意输入。 Javascript可以被禁用，并且用户可以通过在文本框中添加任何文本来滥用，但是没有其他办法可以阻止他，所以保持服务器端检查。

---

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

演示2

将 input 元素与 span 元素，并且仅仅使用CSS定位技术和：在 pseudo，我们在输入上覆盖了一个虚拟元素。

演示的目的，你可以安全地删除它们。

  span {
 position：relative; 
提纲：1px solid＃00f; 
} 
 
 span：在{
 content：; 
宽度：100％; 
身高：100％; 
剩下：0; 
 top：0; 
位置：绝对; 
大纲：1px纯红色; 
宽度：91％; 
} 
  

I want to restrict the user to only be able to change the contents of the box with the spinners provided with input type="number" in HTML5, and not be able to type anything into the box

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

Can I do this?

(my intended audience will only be using Chrome, so the spinners not appearing on IE(9) and Firefox(13) is not an issue)

解决方案

You can use Javascript onkeydown event here... Which will prevent the user to type anything, and still he will be able to use the arrow controls to increase and decrease the numbers.

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

Demo

Note: Just don't depend on JavaScript and HTML, always have a server side validation to ensure that user didn't posted any malicious input. Javascript can be disabled and user can misuse by adding any text in the textbox, but there is no other way you can stop him, so keep a server side check as well.

---

As you commented that you will like to disable the text selection as well, so that users don't get confused, you can also use CSS positioning techniques here, as you said that intended users are of Chrome only, so there is not much of cross browser issue, so you can do something like this...

Demo 2

Wrap the input element with the span element, and just with CSS positioning technique and :after pseudo, we overlay a virtual element over the input.

Now I've kept the outline just for the demonstration purposes, you can remove them safely.

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

这篇关于有没有办法只允许使用输入类型=“数字”的微调控件进行输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！