如何在输入文本中设置唯一可能的值

Posted 2023-05-08

【中文标题】如何在输入文本中设置唯一可能的值

【英文标题】：How to set the only possible values in an input text

【发布时间】：2018-11-09 08:10:30

【问题描述】：

我有一个输入文本表单，需要在其中插入一个从 1 到 10 的值。

我尝试使用掩码对其进行自定义，但它使我写入超过 10 的值，我如何将唯一可能的值设置为从 1 到 10 而不是更少或更多？

表格 input type="text" name="level" id="level"

我用来使它只接受数字并使其长度为 2 位的掩码

function maskFormatterForLvl(val) 
$(val).mask("ZZ", 
    translation: 
        'Z': 
            pattern: /[0-9]/,
            optional: true
        
    
);

;

我尝试使用“max”属性，但它不起作用，可能是因为我是 javascript 新手

【问题讨论】：

为什么不在 html5 中使用输入数字字段？

它必须是文本类型，不是吗？

您可以隐藏箭头。检查我的答案中的更新部分

【参考方案1】：

如果您的输入字段值是数字，那么您可以使用输入类型 'number' 。 min 和 max 属性表示要输入的数字范围。希望这更简单。

<input type="number" min="0" max="10">

更新

为了隐藏箭头，您可以使用以下内容。

/* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button  
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
    
/* For Firefox */
    input[type='number'] 
       -moz-appearance:textfield;
    

【讨论】：

必须是type="text"，因为数字类型显示的箭头，文本类型不可以一样吗？谢谢！！

如果你喜欢使用css，那么你可以隐藏那些箭头。@user9869431

当您使用箭头递增时，输入类型编号仅适用于 min 和 max。如果您键入数字，它将接受所有内容。您甚至可以将文本复制/粘贴到其中（但不能编写文本）。所以，如果没有一些 js 验证，它是行不通的

谢谢！！它解决了箭头的问题，但仍然可以写出大于 10 的数字！！！

是这样吗？我还没有考虑过。干得好。 @MihaiT

【参考方案2】：

如果你必须使用type="text"，你可以使用这个正则表达式

<input type="text" pattern="([0-9])|(10)">

【参考方案3】：

您可以使用文本输入并只允许输入数字，并使用 charCode 。从 48 到 57 是从 0 到 9 的键盘数字。

如果它通过了这个验证，那么你检查它是否超过了你输入的最大值。

对于最小值，用户不能在0 下面输入一些东西，因为这样做他应该能够写-，它不会通过第一个条件（仅限数字）

const input = document.getElementById('level')
input.onkeypress =  function(e) 
    var ev = e || window.event;
    if (ev.charCode < 48 || ev.charCode > 57) 
      return false;
     else if (this.value * 10 + ev.charCode - 48 > this.max) 

      return false;
       else if (this.value * 10 + ev.charCode - 48 < this.min) 

      return false;
     else 
      return true;
    
  

<input type="text" name="level" id="level" min="1" max="10" maxlength="2">

【讨论】：

谢谢！！但是如果我也不想要 0 怎么办？