웹마스터 팁
(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이나 쪽지나 리플로 남겨주세요
-------초보라서 죄송합니다. 틀린부분이 있으면 바로잡아주세요
효과를 본적이 있을겁니다
다음은 그 효과를 내는 스크립트입니다
<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이나 쪽지나 리플로 남겨주세요
-------초보라서 죄송합니다. 틀린부분이 있으면 바로잡아주세요