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

Question

我想在文本框中输入小数点.我想通过在小数点后输入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)在小数点之前,用户输入值不是必须的.用户还必须能够输入整数.

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

谢谢,
Jollyguy

Answer 1

你快到了.只需检查小数点后面不超过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/

Answer 2

考虑利用HTML5的Constraint Validation 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>

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

Answer 3

您可以通过onchange事件以另一种方式执行此操作,不限制用户键入,而只是在键入后转换数字,以制作统一,如下所示,

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

<input id="aninput" type="text" onchange="validateFloatKeyPress(this);" />

45.846应该是45.85你的代码用户需要转换他们自己然后他们将45.85直接键入