如何避免在 中显示临时值<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一起工作。