javascript - 一种接受带小数点的固定长度数字的便捷方法

Question

基本上我需要从输入框中接受一个简单的十进制值字符串。输入的长度固定为 5 位，因此只允许接受 5 位的值。

但是如果整数部分的长度是5，那么在任何时候都应该至少能容纳2个小数点或者至少能容纳2个小数位(不包括小数分隔符)。但是整数部分的长度不应超过 5 位数。

我想使用以下方式:

//co2-weight is the class of input field
//by default the max-length and size is 6
$( '.co2-weight' ).keyup(function() {
      if($(this).val().indexOf('.')>1)
          {
          $('.co2-weight').attr('size','9');
          $('.co2-weight').attr('maxlength','9'); 
          }
      else
          {
          $('.co2-weight').attr('size','6');
          $('.co2-weight').attr('maxlength','6');
          }       
    });

但在这里它需要再次检查整数部分的长度并将其设置为 5。有没有更短或更方便的方法？

更新:

基本问题是在答案中缺少的适当情况下动态调整长度。

Answer 1

您可以使用此代码，但不允许:

• 超过5个整数，也没有
• 超过 2 位小数，也没有
• 多于一位小数，也不
• 除数字或小数点以外的任何其他字符

它还会根据是否有小数点来应用属性更改。

它响应 input 事件，因为有一些方法可以在不触发 keyup 事件的情况下更改内容(例如通过上下文菜单、鼠标或其他设备)。

$( '.co2-weight' ).on('input', function() {
    var good = $(this).val()
        // remove bad characters and multiple points
        .replace(/[^\d.]|\.(?=.*\.)/, '')
        // remove any excess of 5 integer digits
        .replace(/^(\d{5})\d+/, '$1')
        // remove any excess of 2 decimal digits
        .replace(/(\.\d\d).+/, '$1');
    if (good !== $(this).val()) {
        // Only if something had to be fixed, update
        $(this).val(good);
    }
    var pointPos = good.indexOf('.');
    // Determine max size depending on presence of point
    var size = good.indexOf('.')>1 ? 8 : 6;
    // Use prop instead of attr
    $('.co2-weight').prop('size',size);
    $('.co2-weight').prop('maxlength',size);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input: <input class="co2-weight" size="6" maxlength="6">