REACT - 防止小数点后2位小数点后的输入

我在组件中有一个输入框。如果输入框的值包含2个以上的小数位，我想阻止用户添加任何输入。REACT - 防止小数点后2位小数点后的输入

E.g.如果用户输入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} /> 
     ) 
    } 
}

来源

2017-02-13 peter flanagan

我假设'reactjs'有一种绑定到'keydown'事件的方法，在这种情况下你可以做你的检查，然后'返回false'，如果你发现它有2个以上的小数以防止新的入口？ – Nope

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

更换新的值的值，即缩短到每个点后2个字符。 http://jsbin.com/soretokuse/1/edit

来源

2017-02-13 15:43:36

@peterflanagan没有人阻止你翻译 –

我认为你需要保存旧值，应该工作。

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"/>

来源

2017-02-13 15:57:49

至于我在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 
}

处理正确/不正确输入

现在你要处理的用户输入，做一些事情。将字段设置为禁用或只读的内容会阻止进一步的输入和更改，但不会让用户对您的字段进行任何操作。

正如我所看到的，您希望该字段不会在功能上发生变化，您希望能够对其进行编辑。

让你留下2种选择：

通过重写与期望值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）。

如果不正确，则回写旧值或尝试对输入值进行归一化，如果失败则使用最后一次正确的值。

在您清除的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

后者只能在支持它的浏览器。

来源

2017-02-13 16:37:13

您可以使用React受控组件并将一个状态绑定到输入的值atrribute。然后你的onChange事件处理程序看起来像。

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

为我工作。

来源

2018-02-09 08:14:32

REACT - 防止小数点后2位小数点后的输入

回答

相关问题