웹마스터 팁

  2. Support
  3. 웹마스터 팁

(For 초보)폼안에 내용을 자동선택+자동복사해줍니다.

2004.04.10 19:05

쉬드

폼안에 있는내용이 버튼을 누르면 자동으로 복사(클립보드에저장)되는

효과를 본적이 있을겁니다

다음은 그 효과를 내는 스크립트입니다

<HTML>
<HEAD>
<TITLE>폼안에 내용을 복사</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
therange=tempval.createTextRange()
therange.execCommand("Copy")
}
</script>
</HEAD>
<BODY>
<form name="it">
<div align="center">
<input onclick="copyit('it.select1')" type="button" value="누르면 복사됩니다" name="cpy">
<p>
<textarea name="select1" rows="5" cols="40">
위의 버튼을 누르면 이 부분이 선택되고 자동으로 복사됩니다.
브라우저의 주소입력란에 붙여넣기(Ctrl+V) 해보세요.
</textarea>
</div>
</form>
</BODY>
</HTML>


이렇게하면 텍스트박스(맞나?)안에 내용을 복사해줍니다

- 소스 분석 -
<HTML>
<!--HTML의 시작을 알리는 문법-->
<HEAD>
<!--HEAD의 시작을 알림~(즉head 앞대가리)-->
<TITLE>폼안에 내용을 복사</TITLE>
<!--타이틀 지정 폼안에 내용을 복사라는 제목이 타이틀바(제목표시줄)에 나타납니다-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--스크립트를 쓰는데 그 언어가 자바스크립트다-->
function copyit(theField) {
<!--레코드를copyit이라고 설정하고괄호안에 필드이름을 집어넣는다고 선언해줌-->
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
therange=tempval.createTextRange()
therange.execCommand("Copy")
<!--복사한다-->
}
</script>
<!--자바스크립트 끝-->
</HEAD>
<!--앞대가리 설정 끝-->
<BODY>
<!--바디 몸이라는뜻으로 눈으로 보여질 부분을 작성-->
<form name="it">
<!--지금부터 폼이 시작되는데 그 이름하여 it라는 폼을 만든다-->
<div align="center">
<!--가운데 정렬(제로보드 게시판설정에도 있죠^^;)-->
<input onclick="copyit('it.select1')" type="button" value="누르면 복사됩니다" name="cpy">
<!--버튼을 만듭니다. 버튼이름은 cpy고 cpy버튼에 나타날 글자는 누르면 복사됩니다 입니다-->
<!--그리고 그 버튼을 클릭하면 copyit이라고 아까 선언해준 자바스크립트가 실행되는데(onclick가 클릭할때-->
<!--실행될 것을 입력한는거입니다) it이라는폼안에 sclect1이라는 글상자에있는 내용을 말하는것입니다-->
<p>
<!--표가 시작됩니다-->
<textarea name="select1" rows="5" cols="40">
위의 버튼을 누르면 이 부분이 선택되고 자동으로 복사됩니다.
브라우저의 주소입력란에 붙여넣기(Ctrl+V) 해보세요.
</textarea>
<!--글상자를 만드는데 글장자 이름이 select1이고 글상자 넓이가 40이고 5줄짜리를 만듭니다-->
<!--그리고 그안에 들어있는내용은 위의 버튼을 누르면 이 부분이 선택되고 자동으로 복사됩니다.브라우저의 주소입력란에 붙여넣기(Ctrl+V) 해보세요.입니다-->
</div>
<!--div가 끝났습니다. 앞에/를 붙여주는것은 그것을 닫는다는 뜻입니다-->
<!--아까 열어줬으니 닫아줘야줘~-->
</form>
<!--폼을 닫습니다-->
</BODY>
<!--몸둥아리를 닫습니다-->
</HTML>
<!--html이 끝났습니다-->

///////////////////////////////////////////
참고
<input onclick="copyit('it.select1')" type="button" value="누르면 복사됩니다" name="cpy" style="background-color:rgb(51,153,255); border-width:1; border-style:none;">
이렇게 버튼을 바꾸면
background-color:rgb(51,153,255); //배경화면이 rgb컬러로 51,153,225인 즉, 하늘색이된 배경화면을 만들수있습니다.
border-width:1; border-style:none;//모든 태두리가 없습니다


-------이상 별거 아닌 스크롤압박만 큰 잡글이었습니다
-------악플도 환영합니다. 그러나 다른사람에게 피해는주지마세요
-------지우라면 지우겠습니다. 그러나 심한욕은 하지말아 주세요
-------중복이라면 제가 검색을 못하는점을 너그럽게 봐주세요
-------질문있으면 nansith@naver.com이나 쪽지나 리플로 남겨주세요
-------초보라서 죄송합니다. 틀린부분이 있으면 바로잡아주세요
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
자동으로 새로고침되게 하기 [5] 권대건 2004.01.05
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] file PHASE 2004.01.19
마우스 오버시 서브메뉴 나타나게 하는방법 입니다 [12] 키드 2004.01.26
옅은 그레이 쓸때 붉은빛 들어가는경우 [10] 김영호 2004.01.29
nzeo처럼 배너누르면 배너다는법 나오게하기! [6] Rollrang 2004.02.05
전송버튼의 테두리를 없애 BoA요 >_< [7] 플로렐라 2004.02.14
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) [8] 01CODE.com 2004.02.26
몇 가지 팁..( 좀 깁니다.. 어느 정도 안다고 생각하시는 분들, 추천 ) [3] naughtykidd 2004.02.26
간단하게, 색깔있는 밑줄 긋기. [4] naughtykidd 2004.02.27
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
스타일 시트파일을 만들기 .. [4] 박종익 2004.03.07
모든 스킨에서 중국어 간체 볼 수 있도록 해주는 법... [6] 학몽 2004.03.09
(For 초보)폼안에 내용을 자동선택+자동복사해줍니다. [6] 쉬드 2004.04.10
제로보드에서 손쉽게 복사하는 소스 (아래보다 더 편함..) [2] Danggn™ 2004.04.17
[tip]간단한 반투명 필터 적용법 [2] 드래군 2004.04.21
홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] [20] kim's 2004.04.29
자동 스크롤 메뉴 (끄기 기능, 무한 스크롤 X) [6] ☺심심 2004.05.02
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05
플래시 swf파일 배경 투명하게 하기 ~~~ [8] kim's 2004.05.09
아기창 뜨고 부모창 닫기 [6] 임소식 2004.05.19
태그 쓰기