읽기 전용인 input 태그의 값이 변경되었을 때, 감지 방법

진짜.. 이걸로.. 쌩쑈를 다 해서리.. 정리차 적어 놓음..

0. 쇼핑몰 리뉴얼 중 주문 화면에서 우편 번호를 받으면 이게 산간 오지 지역이면 도선료를 추가로 부여해야 하는 상황 발생.

1. 쇼핑몰 솔루션을 자체 마이그레이션 하는 것이기에 알아서 해야 함.

2. daum의 주소찾기 사용 중.

3. 솔루션에서 script로 자체 기능 구현해 놨음.. button 태그 클릭하면 class 감지해서 우편번호 검색기가 뜨게..

4. 문제는 우편 번호를 받는 input 태그가 readonly 속성이라.. 값을 전~~~혀 읽을 수 없음!!

5. 어쩔까 고민하고, 구글링 한 결과.. readonly 속성이 붙은 건 어쩔 수 없고, 키 입력이 안들어오게 막는게 더 낫겠다란 생각이 들음. (readonly 속성을 때면.. 값이라도 읽을 수 있으니..)

6. css로 readonly 속성이 된 것처럼 보이게 하고.. 자~~ 이제 onchange 이벤트로 값을 읽어보자!!!

7. 어? 이거 왜 못 읽지?

8. 이리저리 삽질 시작.. jquery로 이벤트 리스너도 추가. bind도 해보고 triger도 해보고..

9. 안된다!!! 이 쉬운게 안된다니!!! 이게 뭔 상황이지??

10. 좀 더 구글링을 해보니.. change란 이벤트는 키 입력이 이뤄져야 발생이 되고, 값을 고쳐준 경우엔 별도의 처리가 필요하다!~ 란 걸 알게됨..

11. 이하. 조치 내용...

12. 아직도 배울게 많군화~~~~

1. var $input = $("#rcvPost"); //이놈이 오늘의 주인공 우편번호 input box!!   
2. $("#rcvPost").on('input', function() {
3.     // Do this when value changes
4.     console.log("Input text changed!" + $(this).val());
5. });

이렇게 javascript에서 선언하고..

별도의 함수를 구현해야 한다.. 이하 코드..

1. (function ($) {
2.     var originalVal = $.fn.val;
3.     $.fn.val = function (value) {
4.         var res = originalVal.apply(this, arguments);
5.  
6.         if (this.is('input:text') && arguments.length >= 1) {
7.             // this is input type=text setter
8.             this.trigger("input");
9.         }
10.  
11.         return res;
12.     };
13. })(jQuery);

이 같이 처리하면.. 값 변경이 일어나면.. 입력이 된 것처럼 동작시킨다..

진짜 끗!!