Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[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>

원리

원리는 이렇다.

  • 우선 A에 타이핑하는 것을 B에 옮긴다고 하자.
  • A에 포커스(focus)가 잡히는 순간 A와 B의 값을 저장한다(이를 원값이라고 부르자).
  • 그리고 blur(input 등에서 빠져나오는 것)나, keyup 이벤트가 발생할 때 A와 B의 원값을 검사한다.
  • B가 원래 빈 값이라면 그냥 무조건 복사한다.
  • B가 빈 값이 아니라면 A의 원값과 B의 원값이 같을 때만 복사한다. 무조건 동기화를 하면, B의 값을 A와 다르게 넣어 둔 경우 A의 값을 바꿀 때 B의 값이 의도와 다르게 바뀔 수 있기 때문이다. (만약 B의 값을 무조건 A와 같게 하고 싶다면 B에 readonly 속성을 주면 된다.

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

예제

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



안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다