反应 - 防止在小数点后 2 位后输入

Question

我在一个组件中有一个输入框。如果输入框的值包含超过 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} />
        )
   }
}

Answer 1

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

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

为我工作。

Answer 2

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

所以请允许我将您的问题拆分为多个问题。我将尝试解决的问题：

触发

您希望您的逻辑在该领域发生任何事情时始终运行。 以下链接为您提供了选项： http://www.w3schools.com/TAGS/ref_eventattributes.asp

当您使用 onchange 时，它​​会在有人更改值在您模糊该字段（您单击或离开该字段）时触发。所以这不好。

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

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

我的解决方案是，当您关注某个字段并验证值并执行进一步的逻辑时，启动一个计时器。并最终确定您想要在模糊上做的所有事情。

判断值的正确性

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

比如：

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 http://www.w3schools.com/jsref/met_win_settimeout.asp http://www.w3schools.com/jsref/met_win_setinterval.asp

然后在函数运行中，检查是否有先前的值集。

第一次不是这样： 您必须将这个先前的值保存在某个地方，您可以将其保存在 javascript 中的变量中，或者将其放入 DOM 中的字段中。

http://www.w3schools.com/jsref/met_element_setattribute.asp

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

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

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

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

在 blur 事件中，您清除在后台运行的 setTimeout 或 setInterval： http://www.w3schools.com/jsref/met_win_cleartimeout.asp http://www.w3schools.com/jsref/met_win_clearinterval.asp

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

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

B计划

使用 HTML5 数字输入字段：

HTML 5 input type="number" element for floating point numbers on Chrome

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

edited Apr 27 '15 at 18:10
Andre Figueiredo

仅适用于支持它的浏览器。

Answer 3

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

var input=document.getElementById('input'),
    countDecimals=function(value) {
    if(Math.floor(value) === value) return 0;
    if(value.toString().split(".")[1])
    return value.toString().split(".")[1].length || 0;
},
    updateValue=function(val) {
    if(countDecimals(val) > 2) {
      input.value=input.getAttribute('oldValue');
    }
};

input.oninput=function(){
  updateValue(this.value);
  input.setAttribute('oldValue',this.value);
}

<input id="input" type="text"/>

Answer 4

document.getElementById("yourinput").oninput=function(){
  this.value=this.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".");
};

用新值替换该值，即每个点后缩短为两个字符。 http://jsbin.com/soretokuse/1/edit