javascript - 如何将输入限制在某个值范围内

Question

我有一个输入框，它应该只允许-90到90范围内的浮点值。当值不在允许的范围内时，使“发送”按钮不可单击。并在尝试单击按钮时显示一条文本，说明输入无效。

现在我可以使用键码限制输入，即使这只允许输入数字和一个小数点和负号，它也可以让你将符号放在任何地方。 这是 demo

$('#inputLat').keypress(function(event) {
    var code = (event.keyCode ? event.keyCode : event.which);
    if (!(
            (code >= 48 && code <= 57) //numbers
            || (code >= 45 && code <= 46) //period
        )
        || (code == 46 && $(this).val().indexOf('.') != -1)
				|| (code == 45 && $(this).val().indexOf('-') != -1)
       )
        event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="inputLat">Latitude</label>
<br>
<input type="text" id="inputLat" placeholder="-90° to +90°">
<br>
<button type="button" id="sendButton">Send</button>

我希望标志仅出现在开头。

Answer 1

您可以使用<input type="range"> ，如果您不介意支持它的浏览器中的 slider 。如果浏览器不回滚到文本输入，并且可能需要自定义验证。

<div>
  <input type="range" id="start" name="volume"
         min="-90" max="90">
  <label for="volume">Volume</label>
</div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

或者您可以使用<input type="number">

<input type="number" min="-90" max="90">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number