본문으로 건너뛰기

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

모든 태그 보기

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

· 약 2분

Clipboard JS

텍스트 복사는 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분

다음 주소검색 API

소스

/**
* [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 를 입맛에 맞게 조금 변경했다.