限制用户输入2位小数的数值

时间:2014-11-13 08:18:32

标签: javascript jquery

我有一个代码限制用户输入十进制到2位的数值。 下面的脚本工作但代码不允许使用退格键或delkey或导航键(左,右,上,下)。我也想用户将无法输入0或超过70作为值。所以用户可以输入最小值1或70或65.21等。

所以请指导我在此代码中更改的位置。

$('.number').keypress(function (event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }

    var text = $(this).val();

    if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
        event.preventDefault();
    }
});

我有一个基于库的jquery,它的工作方式就像魅力,但是库需要更高版本的jquery,但是我们的公司使用jquery 1.4.1版(jquery-1.4.1.min.js)

以下脚本并指导我如何使用jquery 1.4.1版本开发一个可以顺利运行的脚本。

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <!-- jQuery and Plugin References -->
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://www.decorplanit.com/plugin/autoNumeric-1.9.18.js"></script>
  <script type='text/javascript'>
    $(function($) {
      // Only allow integer values with a max of 70 (denoted by the vMax parameter)
      $('.numericOnly').autoNumeric('init', { vMax: 70, lZero: 'deny', aSep: '', mDec: 0 });    
    });  
  </script>
</head>
<body>
  <!-- Define your specific properties for your field -->
  <input type="text" class="numericOnly" >
</body>

working sample

寻找指导。谢谢

修改

我只是更新一个小区域,如最小值不能为0,而应该是1。

$('.numericOnly').keyup(function (event) {
    var text = $(this).val();
    console.log(text);
    var hasToBeSet = false;
    if ( text.length === 1 && text[0] === '.' ){
        hasToBeSet = true;
        text = "";    
    }
    else if ((text.match(/\./g) || []).length === 2) {
        hasToBeSet = true;
        text = text.substring(0,text.length - 1);
    } else if (text === "70.") {
        hasToBeSet = true;
        text = "70";
    } else if (parseFloat(text) > 70) {
        hasToBeSet = true;
        text = "70";
    } else if (parseFloat(text) < 1) {
        text = "1";
        hasToBeSet = true;
    } else if (text.indexOf(".") !== -1 && text.substring(text.indexOf(".") + 1, text.length).length >= 3) {
        hasToBeSet = true;
        text = text.substring(0, text.indexOf(".")) + text.split('').splice(text.indexOf("."), 3).join('')
    }
    if (hasToBeSet) $(this).val(text);
}).keypress(function (event) {
    console.log(event.keyCode);
    if ((event.which != 46 && event.keyCode != 8 && event.keyCode != 16 && !(event.keyCode >= 37 && event.keyCode <= 40) && event.which != 0) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
        return false;
    }
});

<input type="tehttp://jsfiddle.net/2dnvpn52/5/#updatext" class="numericOnly" onpaste="return false">

2 个答案:

答案 0 :(得分:2)

这是一个可能的解决方案: http://jsfiddle.net/2dnvpn52/17/

我添加了两件事: -onpaste返回false(为了防止某些代码粘贴到输入中) - 将事件更改为keyup以获得实际值(keypress更快,因此您无法获得输入的真实值)

这是应用的逻辑:

//Checking if is more than 70 or less than 70
if (parseFloat(text) > 70) {
    text = "70";
    hasToBeSet = true;
} else if (text < 0){
    hasToBeSet = true;
    text = "0";
}
else if (text.indexOf(".") !== -1 && text.substring(text.indexOf(".") + 1, text.length).length >= 3) {
//Checking if it has a dot and then getting the part after the ., and check if it is longer than 2
    text = text.substring(0, text.indexOf(".")) + text.split('').splice(text.indexOf("."), 3).join('');
    hasToBeSet = true;
}
if ( hasToBeSet )
   $(this).val(text);

编辑:我更改了代码和jsfiddle将event.which放在keypress事件上

答案 1 :(得分:1)

简单的方法是检查每个按键上的小数位数。以下是存根,

Private Sub Text1_KeyPress(KeyAscii As Integer)
    If KeyAscii = 46 Then
        If InStr(Text1.Text, ".") > 1 Then
            KeyAscii = 0
        End If
    End If
End Sub

这将限制用户输入两个或更多小数位。现在添加您的逻辑以防止用户在输入字符串的开头和结尾输入小数位数。