Skip to main content
 首页 » 编程设计

javascript之文本框的按键限制为小数点后两位

2024年02月20日31softidea

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

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

谢谢,
快乐的人

请您参考如下方法:

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