일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- set()
- new set()
- 방심은금물
- 2020
- chart.js
- 클래스 토글
- classList add
- 간식금지다!
- 대표님물리기없기
- classList toggle
- className
- chart responsive
- 안짤렸다
- 커스텀훅
- 언젠간가겠지
- 배열중복제거
- react-router-dom
- 포트폴리오
- 리엑트할수있는퍼블리셔라규
- 를
- classList
- ROUTER 버전6
- 냥빨이다가온다
- classList remove
- 내배위의고양이
- react-router
- 접근성
- 퍼블리싱
- react
- windowwidth
Archives
- Today
- Total
틈
[jQuery] text 복사 기능 본문
<a href="#" class="btn xlarge" data-copy>라인버튼</a>
// copy에 필요한 element append
var $copyElem = $('<textarea id="copyItem"></textarea>');
$copyElem.css({
opacity: 0,
position: "absolute",
width: "1px",
height: "1px",
right: 0,
padding: 0,
});
$("body").append($copyElem);
var $textInner = $('<div class="textInner"></div>');
$("body").append($textInner);
// copy 액션
$("[data-copy]").on("click", function () {
//복사가 필요한 elem처리
var findHtml = $(this).clone();//해당 element를 복사한다.
findHtml.removeAttr("data-copy style");
findHtml.find("*").removeAttr("data-copy style");
//복사한 element와 element 하위에 있는 data-copy,style 속성을 제거한다.
//해당 속성을 제거하지 않으면 복사한 다음에 수동으로 지워줘야 한다.
$(".textInner").html(findHtml); //우선 div 안에 html을 붙여준다.
var newer = $(".textInner").html(); //붙인 html을 다시 변수에 저장해준다.
$("#copyItem").val(newer).select(); //변수에 저장한 html을 textarea 안쪽에 넣어준다.
document.execCommand("copy"); //복사한 내용을 클립보드에 저장해준다.
alert("복사 되었습니다"); // 복사됐다고 사용자에게 알려주는 알림창을 띄운다.
$(".textInner").html(""); // 사용한 뒤, div박스의 내용을 싹 지워준다.
});
1. 복사에 필요한 element(div 1개, textarea 1개)를 body 마지막에 강제 삽입 한다.
2. 복사할 element에 [data-copy] 속성을 추가한다.
3. [data-copy] 를 누르면 onClick 이벤트를 적용한다.
주석참조
'code > Javascript' 카테고리의 다른 글
[jQuery] resize debounce 설정(최적화) (0) | 2022.07.14 |
---|---|
[jQuery] 첨부파일 input[type=file] 처리 (0) | 2022.07.13 |
[jQuery] 무한 롤링 (0) | 2022.06.28 |
[JS] index 값이 length를 넘어설 때, 0 만들기 (0) | 2022.05.17 |
[JS] 숫자 처리 시 2자리를 맞춰야 할 때 (0) | 2022.05.17 |
Comments