输入仅允许1-100个JavaScript答案

【问题标题】：input only allow number 1-100 javascript输入仅允许1-100个JavaScript
【发布时间】：2021-12-13 13:40:51
【问题描述】：

我想使用 javascript 设置输入百分比

<input type="text" class="form-control" id="amount" name="amount">

我做了js，所以当我输入时，它正在添加%

var amount = document.getElementById('amount');
amount.addEventListener('input', function(e){
    amount.value = amount.value.replace('%','') + '%';
})

但还是可以输入字符，我只想输入1-100，可以吗？

或者您可能对输入百分比更好的建议有什么建议

【问题讨论】：

尝试使用isNaN 和preventDefault 来达到您想要的结果。
你能给我举个例子吗？
附上的链接中有例子。
@AlghanyJagad 无论您使用哪种解决方案，请注意用户在 input 中复制粘贴值的情况。在某处提交输入值之前，您还应该涵盖这一点+验证
@MihaiT 感谢您的建议

标签： javascript html percentage

【解决方案1】：

HTML 输入type 属性允许number 值，因此它只能接受数字值。您还可以传递一个max 属性，该属性将为输入的数字设置一个限制。例如：

<input type="number" class="form-control" id="amount" name="amount" max="[YOUR_NUMBER]">

编辑：您仍然可以使用 JS 函数验证您的输入。

<input type="text" class="form-control" id="amount" name="amount">

let amount = document.getElementById('amount');
amount.addEventListener('input', function(e){
    amount.value = amount.value.replace('%','')
    let tmpValue = +amount.value
    amount.value = 0 <= tmpValue <= 100 ? tmpValue + '%' : "[VALUE IF NOT 1<AMOUNT<100]";
})

【讨论】：

但是使用类型号不允许添加“%”字符
除了改变类型还有其他选择吗？因为我需要仍然在文本中的类型
@AlghanyJagad：用户可以更改单位，还是只能以百分比表示？如果它总是一个百分比，那么在<input>之外明确说明，如果它可以被改变，那么也许使用第二个元素 - 也许<select> - 允许用户做出选择？总有替代方案，您只需要权衡这些替代方案的利弊。
@MihaiT 为什么它应该成为输入的一部分？这是使用输入的错误方法。它应该是 range 或 number 类型。
@AlghanyJagad 编辑了我的答案，立即尝试。

【解决方案2】：

有点晚了。这是一个有趣的例子。可以在这里加入更多逻辑。下面的示例只允许 0 到 100 之间的数字，并在末尾添加 %。一旦你输入了一个最多一个的数字，你必须重新开始。必须在此处构建一个新逻辑。

let amount = document.getElementById('amount');
amount.addEventListener('input', function(){
  const n = amount.value.replace('%','');
  if ( n >= 0 && n <= 100 ) {
    amount.value = amount.value.replace('%','') + '%'     
  } else {
     amount.value = n.slice(0, -1) + '%'  
  }
})

&lt;input type="text" class="form-control" id="amount" name="amount"&gt;

【讨论】：