Question

我有一个输入框，它应该只允许在-90到90范围内的float值。当该值不在允许范围内时，使Send按钮不可单击。并在尝试单击按钮时显示一条文本，指出输入无效。

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

static readonly

$('#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();
});

我希望标志只能在开头。

Answer 1

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

<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

Answer 2

也许绑定到输入事件并在那里执行数字验证：

$('#inputLat').on('input', function() {
    var num = parseFloat($(this).val());

    if (num >= -90 && num <= 90) {
        // Input is valid
        console.log('Valid');
        $('#inputLatLabel').removeClass('error');
        $('#sendButton').prop('disabled', false);
    } else {
        // Input is invalid
        console.log('Invalid');
        $('#inputLatLabel').addClass('error');
        $('#sendButton').prop('disabled', true);
    }
});

.error {color: red;}

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

如何将输入限制在一个值范围内

2 个答案: