如何在输入字段中添加数量限制？

Question

我怎么能有数量限制？ 我试图做到这一点，以便您只能在“app-benutzer”中输入数字 1-100 和在“backend-benutzer”中输入 1-15 还有一种方法可以在输入字段中显示这些数字而无需输入它们所以它将向用户显示您只能键入 1-15 之间的数字。

html:
 <body>
    App-Benutzer: <input type="number" min="1" max="100" class='appuser'></input><br>
    Backendbenutzer: <input type="number" min="1" max="15" class='backenduser'></input><br>
    <button class='calcit'>Berechnen</button><br>
    <span class='summe'>0.00</span><br>
    <script src="./app.js"></script>
  </body>
js:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');


btncalc.addEventListener('click', function(){
    var backendanzahl= document.getElementsByClassName("backenduser")[0].value;

    var appanzahl= document.getElementsByClassName("appuser")[0].value;
    var mytext="Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5) ;
    summetext.textContent = mytext;
});

Answer 1

您只能通过使用 HTML 来实现这一点。

这样，除了您在条款中指定的内容之外，您实际上不能写任何东西。

澄清：

Placeholder是用于在输入字段中放置一些文本的属性，但是一旦您单击元素，该文本就会消失。

oninput是每次input元素的value发生变化时发生的事件。 所以基本上，每次你写 1 个数字/字母/随便什么，都会触发oninput事件。

这就是我们放置条件的地方。

this.value - 表示我们在input元素中写入的内容。

我们的值 (this.value) = if (this.value > 100) (? 代表类似于 return 的东西) return 100 ( (:) 就像 else) else return this.value

this.value = this.value > 100 ? 100 : Math.abs(this.value)

相当于

   if(this.value > 100) //this.value is what we write inside of the field
      return 100;
   else
      return this.value;

 <body> App-Benutzer: <input type="number" min="1" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser' placeholder='1-100'></input><br> Backendbenutzer: <input type="number" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser' placeholder='1-15'></input><br> <button class='calcit'>Berechnen</button><br> <span class='summe'>0.00</span><br> <script src="./app.js"></script> </body>

Answer 2

您可以使用输入字段的placeholder属性来放置您想要的任何文本。 一旦用户开始编辑该字段，该文本就会消失。 在您的情况下，您可能会坐一个占位符来可视化“1-15”。

<body>
    App-Benutzer: <input type="number" min="1" max="100" class='appuser' placeholder="Input a value from 1 to 100"></input><br>
    Backendbenutzer: <input type="number" min="1" max="15" class='backenduser' placeholder="Input a value from 1 to 15"></input><br>
    <button class='calcit'>Berechnen</button><br>
    <span class='summe'>0.00</span><br>
    <script src="./app.js"></script>
</body>

如何在输入字段中添加数量限制？

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-07-06 10:06:26

解决方案2
0 2022-07-06 10:08:49

如何在输入字段中添加数量限制？

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-07-06 10:06:26

解决方案2 0 2022-07-06 10:08:49

解决方案1
2 已采纳 2022-07-06 10:06:26

解决方案2
0 2022-07-06 10:08:49