javascript - 不允许在最大值和最小值之间输入数字

Question

我正在从事 Angular 4 项目。我有一个 HTML <input type="number">与 min max和 step属性。我的目标是防止键入超出用户友好的最小-最大范围的数字。我该怎么做？

function myFunction(e) {
    var min = -100;
    var max = 100;

    var txtValue = document.getElementById("txt").value;
    var pressedValue = e.key;

    var combined = parseFloat(txtValue, pressedValue);
    console.log(`OLD:${txtValue}\nNEW:${pressedValue}\nCOMBINED:${combined}`);
    if (combined > max) {

        e.preventDefault();
        console.log('ohhw snapp');
    }
}

<input type="number" id="txt" value="Hello" onkeydown="myFunction(event)" min="-100" max="100" step="0.05">

我的 JSFiddle example

Answer 1

出于用户体验的原因，我会推荐更像这样的东西。如果用户只是认为他们的键盘不工作，他们可能会感到困惑。

$('.range-enforced').on('change', function(e){
  var min=parseFloat($(this).attr('min'));
  var max=parseFloat($(this).attr('max'));
  var curr=parseFloat($(this).val());
  if (curr > max) { $(this).val(max); var changed=true; }
  if (curr < min) { $(this).val(min); var changed=true; }
  if (changed) {
    $warning = $(this).siblings('.warning')
    $warning.text('Only ' + min + ' through ' + max + ' allowed');
    $warning.show()
    $warning.fadeOut(2500);
  }
});

input + .warning {
  background: #ffff99;
  display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="range-enforced" min="-100" max="100" />
<div class="warning" style="display: none;"></div>