다른 input type = text 는 세자리 수마다 콤마를 입력할 수 있는데 readonly 같은 경우는 oninput 도 안 먹고 어떻게 해야 콤마를 찍을 수 있을 지 모르겠습니다. 어떻게 해야 하나요?
<div class="form-group">
<label class="control-label" for="final_price">인수가</label><span style="color: #ef0000;">*</span></label>
<div class="input-group">
<input type="text" name="final_price" value="" id="final_price" class="form-control" style="height: 50px;" oninput="updateFinalPrice(); updateCommas(this);" readonly>
<div class="input-group-text">
<span class="input-group-won">원</span>
</div>
</div>
</div>
<script>
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function updateCommas(inputElement) {
const value = inputElement.value.replace(/,/g, ''); // 콤마 제거
const formattedValue = numberWithCommas(value);
inputElement.value = formattedValue;
}
function updateCommasOnReadOnly(inputElement) {
const value = inputElement.value.replace(/,/g, '');
const formattedValue = numberWithCommas(value);
inputElement.value = formattedValue;
}
function addCommasToReadOnlyInputs() {
updateCommasOnReadOnly(appraisedPriceInput);
updateCommasOnReadOnly(registrationTaxInput);
updateCommasOnReadOnly(finalPriceInput);
updateCommasOnReadOnly(rateOfReturnInput);
}
const appraisedPriceInput = document.getElementById('appraised_price');
const registrationTaxInput = document.getElementById('registration_tax');
const finalPriceInput = document.getElementById('final_price');
const rateOfReturnInput = document.getElementById('rate_of_return');
window.addEventListener('load', function() {
addCommasToReadOnlyInputs();
});
</script>
답변 2개 / 댓글 1개
다음과 같이 수정해 보시는 건 어떨까 합니다.
먼저 input 요소에서 readonly 속성을 제거하고 input 요소를 div나 span 등으로 감싸는 방법으로 텍스트를 표시하고 동시에 콤마를 찍을 수 있도록 해야 할것 같습니다.
<div class="form-group">
<label class="control-label" for="final_price">인수가</label><span style="color: #ef0000;">*</span></label>
<div class="input-group">
<div id="final_price" class="form-control" style="height: 50px; padding-right: 60px;"></div>
<div class="input-group-text">
<span class="input-group-won">원</span>
</div>
</div>
</div>inputElement.value 대신 textContent를 사용하여 값을 표시하고, 필요한 경우 innerText를 사용할 수도 있습니다. 또한 contenteditable 속성을 사용하여 div를 수정 가능한 상태로 만들어 콤마를 입력하고 자동으로 포맷팅할 수 있도록 하면 되지 않을까 생각 합니다.
function updateCommasOnReadOnly(inputElement) {
const value = inputElement.textContent.replace(/,/g, '');
const formattedValue = numberWithCommas(value);
inputElement.textContent = formattedValue;
}
function addCommasToReadOnlyInputs() {
updateCommasOnReadOnly(finalPriceInput);
}
const finalPriceInput = document.getElementById('final_price');
window.addEventListener('load', function() {
addCommasToReadOnlyInputs();
});참고하셔서 원하시는 로직으로 구현하시면 될 것 같습니다.
답변에 대한 댓글 1개
초반에는 readonly를 제거후 스크립트로 적용후 readonly해주시거나 값을 php로 가져오는경우
number_format함수로 적용해 처리해주시면 좋을듯 합니다.
답변을 작성하려면 로그인이 필요합니다.