以逗號掩蓋小數點精度

我有一種情況，我試圖掩蓋不同長度的小數點長度。其中一個要求是輸入需要在每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

以逗號掩蓋小數點精度

回答

相關問題