목록으로

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

호다

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 2,345

답변 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개

정렬:

채택된 답변

+20 포인트

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

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

먼저 input 요소에서 readonly 속성을 제거하고 input 요소를 div나 span 등으로 감싸는 방법으로 텍스트를 표시하고 동시에 콤마를 찍을 수 있도록 해야 할것 같습니다.

Copy

inputElement.value 대신 textContent를 사용하여 값을 표시하고, 필요한 경우 innerText를 사용할 수도 있습니다. 또한 contenteditable 속성을 사용하여 div를 수정 가능한 상태로 만들어 콤마를 입력하고 자동으로 포맷팅할 수 있도록 하면 되지 않을까 생각 합니다.

Copy



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();

});

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

로그인 후 평가할 수 있습니다