readonly 에 나오는 값은 콤마를 찍어줄 수 없을까요?

호다 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.08.17 12:06:01 2002 (211.♡.♡.198)

답변 2

본문

다른 input type = text 는 세자리 수마다 콤마를 입력할 수 있는데 readonly 같은 경우는 oninput 도 안 먹고 어떻게 해야 콤마를 찍을 수 있을 지 모르겠습니다. 어떻게 해야 하나요?

</div>

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>

#그누보드5 #php

답변 2

웹메이킹 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-08-17 14:51:02 39.♡.♡.46

다음과 같이 수정해 보시는 건 어떨까 합니다.

먼저 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();
});

참고하셔서 원하시는 로직으로 구현하시면 될 것 같습니다.