在文本框的按键中限制为 2 位小数？答案

【问题标题】：Restrict to 2 decimal places in keypress of a text box?在文本框的按键中限制为 2 位小数？
【发布时间】：2014-06-06 22:39:09
【问题描述】：

我想在文本框中输入小数点。我想通过在小数点后输入超过 2 位来限制用户。我已经在 Keypress 事件中编写了实现该功能的代码。

function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;

    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    if (charCode == 46 && el.value.indexOf(".") !== -1) {
        return false;
    }

    if (el.value.indexOf(".") !== -1)
    {
        var range = document.selection.createRange();

        if (range.text != ""){
        }
        else
        {
            var number = el.value.split('.');
            if (number.length == 2 && number[1].length > 1)
                return false;
        }
    }

    return true;
}
<asp:TextBox ID="txtTeamSizeCount" runat="server" onkeypress="return validateFloatKeyPress(this,event);" Width="100px" MaxLength="6"></asp:TextBox>

代码可以运行，但问题是：如果我输入 ".75" 然后将其更改为 "1.75"，这是不可能的。唯一的方法是完全删除它，然后输入 "1.75"。如果文本框中的小数点后已有 2 位数字，则会出现此问题。我施加的条件是

a) 出现小数点后，它必须至少有 1 或 2 位数字。例如 .75 或 .7 或 10.75 或 333.55 或 333.2 被接受。但不是 .753 或 12.3335

b) 在小数点之前，用户不必输入数值。用户还必须能够输入整数。

你能告诉我可能是什么问题吗？

谢谢，
小伙子

【问题讨论】：

标签： javascript validation keypress

【解决方案1】：

考虑利用 HTML5 的约束验证 API。它不一定会阻止输入无效值，但该字段被标记为无效并停止提交<form>（默认情况下）。我添加了<output> 来说明浏览器为什么考虑例如“1.100”是一个有效值（它将数值视为“1.1”）。

<input id="n" type="number" step=".01">

var
  n = document.getElementById('n'),
  o = document.getElementById('o'),
  didInputN = function(e) {
    o.value = n.valueAsNumber;
  };

n.addEventListener('input', didInputN);

input:invalid {
  color: white;
  background-color: red;
}

<input id="n" type="number" step=".01">
<output id="o" for="n"></output>

从哲学上讲，您可能会认为这是一种更有用的方法，因为它允许用户粘贴无效条目并直接在字段中进行编辑。

【讨论】：

不错。这比像我那样修复 OP 的脚本要好得多。赞一个。

【解决方案2】：

我的问题是，如果用户只允许使用 2 位小数，我需要它实时显示错误消息：

value = parseFloat(valueFromInput);
parseFloat(value.toFixed(2)) !== value // condition to check

上面的代码对我有用。.toFixed 将浮点数转换为只有 2 个小数的字符串，我必须转换回浮点数以检查初始值是否相同。

附：在此条件之前，您应该检查该值是否为 NaN。

【讨论】：

【解决方案3】：

1.)No multiple decimals points.
2.)Two numbers after decimal point.
3.)Allow only Numbers and one decimal point(.).

这会有所帮助。jsFiddle

【讨论】：

在输入具有 2 个十进制值的数字后，您的代码允许编辑该数字

【解决方案4】：

 function decimalValidation(el, evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       var number = el.value.split('.');
         if(charCode == 8) {
          return true;
         }
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        //just one dot
        if(number.length>1 && charCode == 46){
             return false;
        }
        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
            return false;
        }
        return true;
    }

function getSelectionStart(o) {
    return o.selectionStart
}

嗨@webvitaly 上面的代码也可以在IE中工作，请检查小数点后退格在 Mozilla 中不起作用我更新了我的答案。

【讨论】：

有没有办法在输入数字之前包括输入小数点，即输入 .5（验证为 0.5 OnBlur）。如果我尚未输入值，您当前的解决方案将不允许我输入小数点。

【解决方案5】：

你可以通过 onchange 事件的另一种方式做到这一点，不限制用户输入，而只是在输入后转换数字，使统一，像这样，

function validateFloatKeyPress(el) {
    var v = parseFloat(el.value);
    el.value = (isNaN(v)) ? '' : v.toFixed(2);
}

&lt;input id="aninput" type="text" onchange="validateFloatKeyPress(this);" /&gt;

45.846 应该是 45.85 但在您的代码中，用户需要转换他们的自我，然后他们将直接输入 45.85

【讨论】：

【解决方案6】：

你快到了。只需检查小数点后不超过 2 个字符即可。

更新 1 - 检查克拉位置以允许在小数点前插入字符。
更新 2 - ddlab 的评论指出的正确问题，并且只允许一个点。

 function validateFloatKeyPress(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot (thanks ddlab)
    if(number.length>1 && charCode == 46){
         return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if( caratPos > dotPos && dotPos>-1 && (number[1].length > 1)){
        return false;
    }
    return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
    if (o.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', o.value.length)
        if (r.text == '') return o.value.length
        return o.value.lastIndexOf(r.text)
    } else return o.selectionStart
}

~~http://jsfiddle.net/S9G8C/1/~~
http://jsfiddle.net/S9G8C/203/

【讨论】：

抱歉耽搁了，请了一天假。您的代码不起作用，因为当小数点后有 2 位数字时，它不允许在小数点前输入任何数字。
抱歉，jsfiddle 示例似乎错过了真正的输入验证。我可以毫无问题地输入8.8.8.8.999。只有当我输入正确的数值（如 888.99）时，它才能按预期工作。 :-(
@ddlab - 哦！感谢您指出了这一点。我已经更新了我的答案以纠正这个问题。
@Moob：我可以在 Win10 上的 IE11 中键入小数点后超过 2 个字符。正在寻找解决方案...
任何人都可以复制 2.22 并粘贴任意次数。所以这段代码也应该解决这个问题。

【解决方案7】：

这段代码很完整，我改了“.”转为“，”：

不能以“，”开头

不能写更多“，”

<script type="text/javascript">

    function isNumberKey(evt, el) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split(',');
        var caracter = el.value;

        if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        if (charCode == 44 && caracter == "") {
            return false;
        }

        if (charCode == 44 && caracter.indexOf(",") != -1) {
            return false;
        }

        //get the carat position
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(",");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
            return false;
        }
        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

</script>

【讨论】：