不要允许在最大值和最小值之间输入数字。

Question

我正在进行一个Angular 4项目。我有一个带有min、max和step属性的HTML <input type="number">。我的目标是防止用户键入超出最小值和最大值范围的数字，使其更加用户友好。我该如何做？

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 上的示例代码。

- Franz Peter Tebartz van Elst

---

你无法阻止某人输入错误的值。相反，应该向他们提供反馈，解释出错的原因。 - evolutionxbox

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>

- Tom Dugovic

---

你有不使用jQuery的答案吗？ - putvande

我手头没有（通常我不写太多非库JavaScript），但这应该可以在jQuery之外实现。 - Tom Dugovic

Answer 2

我看到的第一个问题是你正在向parseFloat提供2个参数，而该函数只接受1个参数（也许你被parseInt搞混了，它需要2个参数-一个字符串和一个基数）。你应该先将数字组合起来，然后对组合值进行1次解析浮点数的操作。

例如：

function myFunction() {
  var min = -100;
  var max = 100;
  
  var inputRef = document.getElementById("txt");
  var txtValue = inputRef.value;
  if(isNaN(parseFloat(txtValue))){
    console.log("warning input is not a number");
    return;
  }
  var newNum = parseFloat(txtValue);
  console.log(`NEW:${newNum}`);
  if (newNum > max || newNum < min) {
    console.log('input not in range (' + min + ", " + max + ")");
    inputRef.value = "";
  }
}

<input type="number" id="txt"
        onkeyup="myFunction()"
        min="-100"
        max="100"
        step="0.05"
        >

如果输入不在范围内，则在键盘松开时将输入重置为空。根据上面的注释，您可以使用此功能通知用户存在问题。

- Andrew Lohr

---

谢谢，非常好的方法。 但是无法输入带小数点的值。例如：'15.65' - Franz Peter Tebartz van Elst

我修复了示例，使其也使用浮点数。 - Andrew Lohr

我更新了示例，如果用户输入的数字不在范围内，则将输入重置为空。最好以某种方式告诉用户出了什么问题。 - Andrew Lohr