10 진수 정밀도를 쉼표로 마스킹

Question

다양한 길이의 10 진수 길이를 마스크하려고하는 상황이 있습니다. 요구 사항 중 하나는 입력에 매 3 자리 (자동 삽입 됨) 사이에 ','가 있어야한다는 것입니다. 십진수의 정밀도는 어떤 유형 (1 정밀도 2, 정밀도 등)으로 고정됩니다. 그래서 우리는 내가 다른 방법으로 부트 스트랩이 같은 뭔가를 만들려고했습니다

000,000.00 

000,000.000 

000,000 

형태의 입력을 가질 수있다. 그러나 입력 그룹 addon 너비를 정상적인 부트 스트랩 스타일로 설정하면이 작업을 수행 할 수 없습니다. 사람이 입력 이런 종류의에 대한 좋은 해결책 건너 경우

궁금 해서요.

Answer 1

jQuery를 사용할 수 있습니다. 예를 들어, (이 아이디 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 변화를 매 3 자에 적용됩니다.

확인 조각 :

$(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>