Question

我在组件中有一个输入框。我想阻止用户在输入框的值包含多于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} />
        )
   }
}

Answer 1

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

Answer 2

我认为你需要保存旧值，这应该有效。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

就我在Javascript和HTML方面的知识而言，没有一个简单的解决方案＆＃39;为了这。使用＆raw;＆＃39; raw＆＃39; 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);

现在你在保存它之前检查这个值是否正确，否则只需将其默认为空白（或尝试将值标准化为有效的值，例如，你可以继续删除右边的字符）。

现在每次运行都会检查值是否正确。如果值正确，则将新值保留为＆＃39; new＆＃39;之前的值（如果使用该方法，则再次调用setTimeout）。

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

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

（或者你可以检查document.activeElement是否与在这个＆＃39;循环上运行的那个相同，所以它知道何时停止。）

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

计划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 4

您可以使用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(".")})
    }

为我工作。

REACT - 在达到2位小数后，防止小数点后的输入

4 个答案: