如何避免在 <input> 中显示临时值？

Question

我创建了一个仅接受 15 和 27 的倍数的输入。代码有效，但单击向上/向下箭头会在逻辑将其更改为接受值之前显示不接受的值一毫秒。 示例：当前值为 15。点击向上箭头后，输入首先显示 16，然后将其更改为 27。 我怎样才能避免这种情况？

这是我的代码：

Index.razor

<input type="number" @bind-value="@Foo">

Index.razor.cs

public partial class Index
{
    private int _foo = 500;

    private int Foo
    {
        get => _foo;
        set
        {
            if (value != _foo)
            {
                if (value > _foo)
                {
                    _foo = value;
                    while (_foo % 15 != 0 && _foo % 27 != 0)
                    {
                        _foo++;
                    }
                }
                else
                {
                    _foo = value;
                    while (_foo % 15 != 0 && _foo % 27 != 0)
                    {
                        _foo--;
                    }
                }
            }
        }
    }
}

非常感谢！

Answer 1

好的，我对此进行了更多研究，似乎输入字段内的向上和向下箭头导致了问题。我已经用 js 测试过，在应用计算出的数字之前，仍然有一些闪烁显示下一个或上一个数字。输入您的号码或使用键盘箭头键来增加或减少它们似乎完美无缺。

所以这可能不是 Blazor 本身造成的，因为 JS 也在挣扎

最好的办法是隐藏这些用于数字输入的箭头/微调器，只允许用户输入数字和/或使用键盘上的箭头键来更改它们。

这是一个如何在 JS 中工作的示例（应该适用于 Blazor，因为它们还添加了输入事件）：

隐藏输入字段的箭头/微调器：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
  
input[type=number] {
    -moz-appearance: textfield;
}

提示：根据您的需要进行编辑，因为它会在所有数字输入中删除它们。

添加您的数字输入元素

<input type="number" min="15" max="5000" id="specialNumberInput"/>

捕捉输入的事件来计算你的值

var currentValue = 500;

document.getElementById('specialNumberInput').onchange = function (event) {
  let minValue = parseInt(event.srcElement.getAttribute('min'));
  let maxValue = parseInt(event.srcElement.getAttribute('max'));
  let value = parseInt(event.srcElement.value);

  if(value > maxValue) {
    currentValue = maxValue;
    event.srcElement.value = currentValue;
    return;
  }

  if(value < minValue) {
    currentValue = minValue;
    event.srcElement.value = currentValue;
    return;
  }

  if (value > currentValue)
  {
    while (value % 15 != 0 && value % 27 != 0)
    {
      value++;
    }
  }
  else
  {
    while (value % 15 != 0 && value % 27 != 0)
    {
      value--;
    }
  }
  
  currentValue = value;
  event.srcElement.value = currentValue;
}

如上所述，您可以将 Blazor 代码附加到输入的“onchange”事件并运行逻辑来计算下一个或上一个值。由于 js 也会闪烁，因此删除选择箭头/微调器可能也可以与 Blazor 完美配合。