Javascript REACT-在达到小数点后2位后阻止输入

我在组件中有一个输入框。如果输入框的值包含超过2个小数位，我希望阻止用户添加任何输入

例如，如果用户输入

10.95

，我不希望允许他们在该值之后写入任何其他内容。他们仍然可以将其更新为

101.95

，但应防止在最后一位小数后添加任何输入

到目前为止，我的代码如下

class inputBox extends Component {

    countDecimals(value) {
        if(Math.floor(value) === value) return 0;
        return value.toString().split(".")[1].length || 0;
    }

    updateValue(e) {
        if(this.countDecimals(e.target.value) > 2) {
            //prevent user from inputting into box after the decimal place...
        }
    }

    render() {
       return(
          <input type='text' onChange={this.updateValue} />
        )
   }
}

类inputBox扩展组件{
十进制数（值）{
if（Math.floor（value）==value）返回0；
返回值.toString（）.split（“.”[1]。长度| | 0；
}
更新值（e）{
如果（此计数小数（即目标值）>2）{
//防止用户在小数点后输入框。。。
}
}
render（）{
返回(
)
}
}

将该值替换为新值，即每个点后缩短为两个字符。

---

我认为您需要保存旧值，这样应该可以

var input=document.getElementById（'input'），
countDecimals=函数（值）{
if（Math.floor（value）==value）返回0；
if（value.toString（）.split（“.”[1]）
返回值.toString（）.split（“.”[1]。长度| | 0；
},
updateValue=函数（val）{
如果（十进制数（val）>2）{
input.value=input.getAttribute（'oldValue'）；
}
};
input.oninput=function（）{
updateValue（this.value）；
input.setAttribute（'oldValue'，this.value）；
}

---

就我在Javascript和HTML方面的知识而言，没有“简单的解决方案”。通过使用“原始”JS和ExtJs表单，我了解到有多种方法可以聚焦和操作字段。这使得在正确的时间操纵内部值变得困难

因此，请允许我将您的问题分成多个问题。我将尝试解决以下问题：

触发

你想让你的逻辑在任何时候都运行，在这个领域发生了一些事情。 以下链接为您提供了选项：

当您使用onchange时，当有人在模糊字段后更改值时（单击或用tab键远离字段），将触发onchange。所以这不好

您可以尝试按键（向上、向下、按下）事件。但这不包括粘贴值的情况

长话短说，理论上，你可以尝试在你能想到的每一个事件上实现一个函数，以确保你捕捉到用户的输入并用它做你想做的事情

我的解决方案是，在聚焦一个字段时启动一个计时器，验证值并执行进一步的逻辑。完成你想在blur上做的一切

确定值的正确性

您可以编写一些漂亮的正则表达式或单行语句来告诉您该值是否正确。最后一切都一样，它应该适合你的需要

比如：

var inputVar = element.value;
var inputFloat = parseFloat(inputVar);
var normalizeInput = Math.round(inputFloat * 100) / 100;
if(inputFloat > 0 && normalizeInput == inputFloat){
    #correct value
}else{
   #incorrect value
}

处理正确/不正确的输入

现在，您需要处理用户输入并执行一些操作。 将字段设置为禁用或只读会阻止进一步的输入和更改，但不会允许用户对字段执行任何操作

因为我读到的是，您希望字段的功能不发生变化，您希望能够对其进行编辑

因此，您有两个选择：

通过使用所需的值覆盖element.value直接编辑字段内容

操纵按键输入/选择，尝试将光标保持在用户留下的相同位置，同时更正错误输入

我会选择前者，因为它不太麻烦，尽管它可能会弄乱光标位置（取决于浏览器）

最终实施

因此，我建议结合以上所有内容：

对焦时，开始运行setTimeout或setInterval

然后在函数运行中，检查是否设置了以前的值

第一次并非如此： 您必须在某个地方保存这个前一个值，您可以将它保存在javascript中的变量中，或者将它放入DOM中的字段中

现在，在保存之前检查该值是否正确，否则只需将其默认为空（或者尝试将该值标准化为可验证的值，例如，您可以继续删除右侧的字符）

现在，在每次运行时，检查值是否正确。如果该值正确，则将新值保留为“new”以前的值（如果使用该方法，则再次调用setTimeout）

如果不正确，则回写旧值或尝试将输入值正常化，如果失败，则使用最后一个正确值

在模糊事件中，清除在后台运行的setTimeout或setInterval：

（或者，您可以检查document.activeElement是否与在此“循环”上运行的相同，以便它知道何时停止）

在模糊上，您最后一次检查该值，并执行相同的逻辑以防止错误输入

方案B

使用HTML5数字输入字段：

如果目标是2位小数，请尝试
地点：-）。
2015年4月27日18:10编辑
安德烈·菲盖雷多

---

它只在支持它的浏览器上工作。

您可以使用React受控组件并将状态绑定到输入的值属性。然后您的onChange事件处理程序将如下所示

    updateValue(e) {
        this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")})
    }

---

为我工作。

@peterflanagan没有人阻止你翻译我假设

reactjs

有一种方法可以绑定到

keydown

事件，在该事件中，你可以进行检查，然后

返回false

，如果你检测到它有两个以上的小数来阻止新的输入？

var inputElement.setAttribute('old_value', oldValue);

Try <input type="number" step="0.01" /> if you are targeting 2 decimal
places :-).

edited Apr 27 '15 at 18:10
Andre Figueiredo

    updateValue(e) {
        this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")})
    }