以逗号掩盖小数点精度

我有一种情况，我试图掩盖不同长度的小数点长度。其中一个要求是输入需要在每3个数字之间有一个'，'（自动插入）。小数的精度固定为它们的类型（1精度2，精度等）。所以我们可以有形式以逗号掩盖小数点精度

000,000.00 

000,000.000 

000,000

我试图创建引导这样的事情作为一个替代方法的输入。不过，我似乎无法与输入组一起设置input-group-addon宽度与正常引导样式。

如果有人遇到一个很好的解决方案，这种投入的我不知道。

来源

2017-05-08 adc90

你可以选择使用jQuery;例如，考虑这个脚本（它假定ID为number输入）：

<script type="text/javascript"> 
    $(document).ready(function() { 
    function reverseStr(str) { 
     return str.split("").reverse().join(""); 
    } 

    $('#number').on('change', function() { 
     var value = reverseStr($(this).val().replace(/,/g, "")).match(/.{1,3}/g).join(); 

     $(this).val(reverseStr(value)); 
    }); 
    }); 
</script>

该脚本将每次申请一个逗号每三个字符的输入number变化（即当输入失去焦点）。

检查片段：

$(document).ready(function() { 
 
    function reverseStr(str) { 
 
    return str.split("").reverse().join(""); 
 
    } 
 

 
    $('#number').on('change', function() { 
 
    var value = reverseStr($(this).val().replace(/,/g, "")).match(/.{1,3}/g).join(); 
 

 
    $(this).val(reverseStr(value)); 
 
    }); 
 
});

.number, .decimals { 
 
    margin: 0px; 
 
    border: 0px; 
 
    font-size: 12px; 
 
    color: #777; 
 
    padding: 8px; 
 
    color: #999; 
 
    font-weight: 500; 
 
} 
 

 
.number { 
 
    width: 150px; 
 
} 
 

 
.decimals { 
 
    width: 50px; 
 
} 
 

 
.inputs { 
 
    background-color: #ccc; 
 
    border: 1px solid #ccc; 
 
    padding: 0px; 
 
    display: inline-block; 
 
} 
 

 
.dot { 
 
    width: 20px; 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="inputs"> 
 
    <input type="text" id="number" class="number" placeholder="000,000"> 
 
    <div class="dot">.</div> 
 
    <input type="text" id="decimals" class="decimals" placeholder="00"> 
 
</div>

来源

2017-05-08 04:02:04 Gerry

以逗号掩盖小数点精度

回答

相关问题