본문으로 건너뛰기

"javascript" 태그로 연결된 112개 게시물개의 게시물이 있습니다.

모든 태그 보기

Clipboard JS 사용법 - 브라우저 텍스트 복사

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

텍스트 복사는 zeroclipboard 를 사용하라고 많이 나오는데, flash 를 이용해 복사하는 방법이다. 더 쉽고 간편하게 ClipboardJS 라이브러리를 사용해보자

설치​

# npm
$ npm install clipboard --save

$ yarn add clipboard

소스​

<script src="/bower_components/clipboard/dist/clipboard.min.js"></script>

<!-- 1. URL copy -->
<a href="#" id="btnCopyUrl" data-clipboard-action="copy">url 복사</a>
<script>
  $(function ({
      // 복사 버튼을 만들시 data-clipboard-text 안에 복사할 문구를 넣어준다
      $('#btnCopyUrl').attr('data-clipboard-text', document.location.href);
      // callback 설정
      var clipboard = new Clipboard('#btnCopyUrl');
      clipboard.on('success', function(e) {
          alert('복사되었습니다');
      });
      clipboard.on('error', function(e) {
          console.log(e);
      });
  });
</script>

<!-- 2. Text copy -->
<textarea id="textBody" cols="30" rows="5"></textarea>
<button
  type="button"
  id="btnCopyText"
  data-clipboard-action="copy"
  data-clipboard-target="#textBody"
>
  텍스트복사
</button>

설명

html5 attribute 를 사용해 쉽게 제어가 가능하다.

신규 브라우저들은 다 지원하지만 (window.clipboard 객체가 있는 브라우저) iPhone 에선 clipboard 액세스가 모두 막혀있어서 복사를 할 수 없다.

다음 주소 검색 API

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

소스​

/**
 * [searchAddr 다음주소검색 API]
 * @return {[JsonArray]} [주소데이터]
 * <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"> 선행되어야함
 */
const searchAddr = function () {
  new daum.Postcode({
    oncomplete: function (data) {
      let fullAddr = ""; // 최종 주소 변수
      let extraAddr = ""; // 조합형 주소 변수
      let engAddr = "";
      let zipcode = "";

      // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
      if (data.userSelectedType === "R") {
        // 사용자가 도로명 주소를 선택했을 경우
        fullAddr = data.roadAddress;
        zipcode = data.zonecode;
        engAddr = data.roadAddressEnglish;

        //법정동명이 있을 경우 추가한다.
        if (data.bname !== "") {
          extraAddr += data.bname;
        }
        // 건물명이 있을 경우 추가한다.
        if (data.buildingName !== "") {
          extraAddr +=
            extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
        }
        // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
        fullAddr += extraAddr !== "" ? " (" + extraAddr + ")" : "";
      } else {
        // 사용자가 지번 주소를 선택했을 경우(J)
        fullAddr = data.jibunAddress;
        zipcode = data.postcode;
        engAddr = data.jibunAddressEnglish;
      }

      // 구버전일 경우 getElementById 로 변경
      document.querySelector("#zip").value = zipcode;
      document.querySelector("#address").value = fullAddr;
      document.querySelector("#address_eng").value = engAddr;

      document.querySelector("#address_detail").focus();
    },
  }).open();
};

설명​

다음 주소검색 API 를 입맛에 맞게 조금 변경했다.