테스트 사이트 - 개발 중인 베타 버전입니다

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

호다 2년 전 조회 2,090

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

 

   *

   

     

 

     

         

     

   

 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

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

 

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

 

</p>

<p><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를 수정 가능한 상태로 만들어 콤마를 입력하고 자동으로 포맷팅할 수 있도록 하면 되지 않을까 생각 합니다.

 

</p>

<p>function updateCommasOnReadOnly(inputElement) {

    const value = inputElement.textContent.replace(/,/g, '');

    const formattedValue = numberWithCommas(value);

    inputElement.textContent = formattedValue;

}</p>

<p>function addCommasToReadOnlyInputs() {

    updateCommasOnReadOnly(finalPriceInput);

}</p>

<p>const finalPriceInput = document.getElementById('final_price');</p>

<p>window.addEventListener('load', function() {

    addCommasToReadOnlyInputs();

});

 

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

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

답변에 대한 댓글 1개

호다
2년 전
답변감사합니다. 결과값에 콤마 넣는 코드 추가해서 해결했습니다. ^^

댓글을 작성하려면 로그인이 필요합니다.

플라이
2년 전

초반에는 readonly를 제거후 스크립트로 적용후 readonly해주시거나 값을 php로 가져오는경우

number_format함수로 적용해 처리해주시면 좋을듯 합니다.

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

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인