javascript - 是否可以确保用户的输入不超过 JavaScript 中的特定范围？

Question

所以我目前有一个设置，其中有输入数字的输入框。范围是 0-100。我想将该值保持在该范围内，因此如果将其设置为 200，则它的上限为 100，或者在负数的情况下为 0。
我认为使用 if 语句是可能的。但我看到它工作的唯一方法是通过多个 if/else if陈述。所以我想知道是否还有其他方法可以实现目标。
Can view the current thing here
我的代码:

function updateStats() {
  var hp = document.getElementById("hpValue").value;
  var mp = document.getElementById("mpValue").value;
  var strength = document.getElementById("strengthValue").value;
  var defense = document.getElementById("defenseValue").value;
  var speed = document.getElementById("speedValue").value;
  var luck = document.getElementById("luckValue").value;

  document.getElementById("hpBar").style.width = hp + "%";
  document.getElementById("mpBar").style.width = mp + "%";
  document.getElementById("strBar").style.width = strength + "%";
  document.getElementById("defBar").style.width = defense + "%";
  document.getElementById("speedBar").style.width = speed + "%";
  document.getElementById("luckBar").style.width = luck + "%";

}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

.statbarsBG {
  background-color: #808080;
  text-align: left;
  height: 20px;
  width: 350px;
  -webkit-appearance: none;
  border: none;
  font-weight: bold;
  /* Set the progressbar to relative */
  position: relative;
}

.statbarsHP {
  background-color: green;
  height: 20px;
}

.statbarsMP {
  background-color: purple;
  height: 20px;
}

.statbarsSTR {
  background-color: red;
  height: 20px;
}

.statbarsDEF {
  background-color: darkblue;
  height: 20px;
}

.statbarsSPD {
  background-color: powderblue;
  height: 20px;
}

.statbarsLUCK {
  background-color: khaki;
  height: 20px;
}

input:invalid {
  border: 3px solid red;
}

<h3>Character Rank: B</h3>

<table cellspacing="20">
  <tr>
    <th>Stat</th>
    <th> Level</th>
    <th> Value (Between 0-100)</th>
  </tr>
  <tr>

    <td>HP</td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsHP" style=" width:93%" id="hpBar" </div>
    </td>
    <td> <input type="text" pattern="[0-9]+" id="hpValue"> </td>
  </tr>
  <tr>

    <td label="MP">MP</td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsMP" style=" width:30%" id="mpBar">

        </div>
      </div>
      </>
    </td>

    <td> <input type="text" pattern="[0-9]+" id="mpValue" value=""> </td>
  </tr>
  <tr>

    <td>STR </td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsSTR" style=" width:75%" id="strBar" </div>
    </td>
    <td> <input type="text" pattern="[0-9]+" id="strengthValue" value=""> </td>
  </tr>

  <tr>

    <td>DEF </td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsDEF" style=" width:89%" id="defBar" </div>
    </td>
    <td> <input type="text" pattern="[0-9]+" id="defenseValue"> </td>
  </tr>

  <tr>

    <td>SPEED </td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsSPD" style=" width:45%" id="speedBar" </div>
    </td>
    <td> <input type="text" pattern="[0-9]+" id="speedValue" value=""> </td>
  </tr>

  <tr>

    <td>LUCK </td>
    <td>
      <div class="statbarsBG">
        <div class="statbarsLUCK" style=" width:95%" id="luckBar" </div>
    </td>
    <td> <input type="text" pattern="[0-9]+" id="luckValue" value="" class="userInput"> </td>
  </tr>
</table>


<button onclick="updateStats()">Click to Update Stats</button>

Answer 1

使用<input type="number"> .要设置范围，您可以使用属性 min和 max .
例如:<input type="number" min="0" max="100" id="strengthValue" value="">要防止用户输入高于最大值或低于最小值的值，您可以使用以下脚本:

function checkMinMax(event) {
var value = this.value,
    min = this.getAttribute('min'),
    max = this.getAttribute('max');

if(value < min)
    this.value = min;
else if(value > max)
    this.value = max;
}

window.addEventListener('load', function() {
    document.getElementById('yourinput').addEventListener('keyup', checkMinMax);
});