[jQuery 코드조각] 두 input의 내용을 동기화

뭐 별 거 없고 그냥 이런 거다.

function init_sync_to(){
    $('.js-sync-to').on('focus', function(){
        var selector = $(this).data('sync-to');
        var $sync_to_target = $(selector);
        $(this).data('original-value', $(this).val());
        $sync_to_target.data('original-value', $sync_to_target.val());
    });
    $('.js-sync-to').on('blur keyup', function(){
        var selector = $(this).data('sync-to');
        var $sync_to_target = $(selector);
        var value = $(this).val();
        var original_value = $(this).data('original-value');
        var target_original_value = $sync_to_target.data('original-value');
        // 동기화할 대상의 값이 비어있거나 현재 값과 같은 경우에만 동기화한다.
        if(target_original_value == '' || original_value == target_original_value){
            $sync_to_target.val(value);
        }
        // select2라면.
        if(typeof $.fn.select2 == 'function'){
            $sync_to_target.select2('val', value);
        }
    });
}

html은, class를 js-sync-to로 주고 data-sync-to='.target-class-name' 식으로 주면 된다.

<label>source: <input type="text" class="js-sync-to" data-sync-to=".js-sync-target"></label>
<label>target: <input type="text" class="js-sync-target"></label>

원리

원리는 이렇다.

플러그인으로 만들어도 되겠지만 귀찮고, 초심자들에게는 플러그인 형태로 돼 있는 코드보다 함수 형태로 돼 있는 코드가 이해하기 쉽다고 생각해서 플러그인으로 만들진 않았다.

예제

물론 jQuery를 넣어야 한다. 아래는 예제.



카테고리

17년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

워드프레스를 오래 다뤄 왔고 강의도 두 편 찍었습니다.
– 인프런 “워드프레스 제대로 개발하기 어드민 편, 클라이언트 편
– 클래스101 “누구나 할 수 있는 워드프레스 홈페이지 만들기 – 기획부터 출시까지 한 방에 OK

유튜브 채널에 워드프레스 관련 팁들을 올리고 있습니다.

👉 소개 더 보기

대표글

댓글 남기기