환영합니다. 바다아이 홈페이지 입니다.

'이태원 150명 넘게 죽은 핼러윈 참사.. 오세훈 탄핵.. 윤석열 탄핵.... 행안부 장관 이상민은 사람이냐... 말만 하면 책임 회피..'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (16) |

여러가지 팁 (1056) |

추천 및 재미 (152) |

자료실 (22) |

시사, 이슈, 칼럼, 평론, 비평 (602) |

끄적거림 (129) |

문예 창작 (705) |

바람 따라 (69) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (228)
리눅스 서버 (148)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (179)
php (2)
디자인 관련 (1)
javascript/jquery (76)
DATABASE (9)
mariadb, mysql (33)
postgresql (45)
생활/쇼핑 (39)
컴퓨터/핸드폰 (45)
종교/자선 (3)
요리관련 (22)
음식관련 (15)
의학관련 (8)
건강/운동 관련 (12)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (9)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (7)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

javascript/jquery

javascript/jquery - 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click

이 름 : 바다아이 | 조회수 : 9362

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp {
  color: #080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link {
  color: #066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #606;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9B703F
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
 font-style: italic;
}
</style>
<pre>
<code class="hljs">&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;

&lt;style&gt;
body {
 background-color:#999999;
 font-family: &#39;Oswald&#39;, sans-serif;
 }
p
{
 color:#000000;
 font-size:20px;
}

.textBox
{
 height:30px;
 width:300px;
}

button
{
 height:30px;
 width:150px;
 border-radius:8px;
 padding:10px;
 font-size:20px;
 font-family: &#39;Oswald&#39;, sans-serif;
 height:52px;
 cursor:pointer;
 background-color:wheat;
}
&lt;/style&gt;

&lt;link href=&#39;https://fonts.googleapis.com/css?family=Oswald&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;

&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
function copyToClipboard(element) {
 var $temp = $(&quot;&lt;input&gt;&quot;);
 $(&quot;body&quot;).append($temp);
 $temp.val($(element).text()).select();
 document.execCommand(&quot;copy&quot;);
 $temp.remove();
 alert(&quot;복사완료&quot;);
}
&lt;/script&gt;

&lt;p style=&quot;color:wheat;font-size:55px;text-align:center;&quot;&gt;How to copy a TEXT to Clipboard on a Button-Click&lt;/p&gt;

&lt;center&gt;
보통 input, textarea 에 데이터가 있어야 복사가 됩니다.&lt;br&gt;
그걸 이용해 일반 태그 안에 있는 내용들을 꼼수로 input 하나 만들어서 넣었다 복사하는 개념입니다.&lt;br&gt;
개행열 처리가 필요하면 textarea 를 만들어서 넣었다 빼면 되겠죠.... &lt;br&gt;
아래 예제를 눌러보시고 메모장이나 아래 input 안에 넣어보세요.. 복사가 되는 것을 확인 할 수 있습니다.&lt;br&gt;
저 위에 jquery 는 아무거나 받아서 사용해도 됩니다.&lt;br&gt;&lt;br&gt;

&lt;p id=&quot;p1&quot;&gt;Hello, I&#39;m TEXT 1&lt;/p&gt;
&lt;p id=&quot;p2&quot;&gt;Hi, I&#39;m the 2nd TEXT&lt;/p&gt;&lt;br/&gt;

&lt;button onclick=&quot;copyToClipboard(&#39;#p1&#39;)&quot;&gt;Copy TEXT 1&lt;/button&gt;
&lt;button onclick=&quot;copyToClipboard(&#39;#p2&#39;)&quot;&gt;Copy TEXT 2&lt;/button&gt;
 
&lt;br/&gt;&lt;br/&gt;&lt;input class=&quot;textBox&quot; type=&quot;text&quot; id=&quot;&quot; placeholder=&quot;Dont belive me?..TEST it here..;)&quot; /&gt;
&lt;/center&gt;

출처 : https://codepen.io/shaikmaqsood/pen/XmydxJ
</code></pre>

짧은 주소 : https://www.bada-ie.com/su/?851591788268

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
body {
              background-color:#999999;
              font-family: 'Oswald', sans-serif;
      }
p
{
  color:#000000;
  font-size:20px;
}

.textBox
{
  height:30px;
  width:300px;
}

button
{
  height:30px;
  width:150px;
  border-radius:8px;
  padding:10px;
  font-size:20px;
  font-family: 'Oswald', sans-serif;
  height:52px;
  cursor:pointer;
  background-color:wheat;
}
</style>

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
  alert("복사완료");
}
</script>

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>

<center>
보통 input, textarea 에 데이터가 있어야 복사가 됩니다.<br>
그걸 이용해 일반 태그 안에 있는 내용들을 꼼수로 input 하나 만들어서 넣었다 복사하는 개념입니다.<br>
개행열 처리가 필요하면 textarea 를 만들어서 넣었다 빼면 되겠죠.... <br>
아래 예제를 눌러보시고 메모장이나 아래 input 안에 넣어보세요.. 복사가 되는 것을 확인 할 수 있습니다.<br>
저 위에 jquery 는 아무거나 받아서 사용해도 됩니다.<br><br>

<p id="p1">Hello, I'm TEXT 1</p>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
  
<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>


출처 : https://codepen.io/shaikmaqsood/pen/XmydxJ

1 page / 3 page
번 호	카테고리	제 목	이름	조회수
76	javascript/jquery	스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정.	바다아이	6970
75	javascript/jquery	자바스크립트 스크롤을 문서 화면 상단, 하단으로 이동하기. 스크롤을 시작, 끝으로 이동하기	바다아이	5159
74	javascript/jquery	javascript 서버시간 가져오기, 서버날짜 가져오기...	바다아이	6898
73	javascript/jquery	자바스크립트 쿠키 클래스, cookie class	바다아이	7416
72	javascript/jquery	select 박스 3단 카테고리	바다아이	8390
71	javascript/jquery	자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기...	바다아이	7833
70	javascript/jquery	자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js	바다아이	9987
69	javascript/jquery	textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기...	바다아이	10092
68	javascript/jquery	마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기...	바다아이	8205
67	javascript/jquery	textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus	바다아이	11322
66	javascript/jquery	jquery ajax option 옵션 총 정리....	바다아이	8523
65	javascript/jquery	jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제	바다아이	8236
64	javascript/jquery	javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림)	바다아이	9129
63	javascript/jquery	javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체)	바다아이	9274
62	javascript/jquery	CSS3 회전 속성과 javascript를 활용한 아날로그 시계	바다아이	10034
61	javascript/jquery	javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기	바다아이	9317
60	javascript/jquery	javascript 자바스크립트 날짜 계산하는 다양한 방법	바다아이	9898
59	javascript/jquery	자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어	바다아이	12979
58	javascript/jquery	url 인코드, 디코드, encode, decode 예제...	바다아이	8408
57	javascript/jquery	javascript 자바스크립트 프레임 페이지 이동... frame location.href	바다아이	13966
56	javascript/jquery	File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현.	바다아이	8844
55	javascript/jquery	자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight	바다아이	9024
54	javascript/jquery	자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환	바다아이	10344
53	javascript/jquery	자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점...	바다아이	9103
52	javascript/jquery	자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode	바다아이	9301
51	javascript/jquery	자바스크립트 javascript post, get 값 파라미터 받기, 구하기	바다아이	10560
현재글	javascript/jquery	자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click	바다아이	9363
49	javascript/jquery	jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제.	바다아이	8958
48	javascript/jquery	자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete	바다아이	9933
47	javascript/jquery	자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기)	바다아이	9217
1 2 3
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.06013 초
to webmaster... gogo sea. gogo sea.