티스토리 뷰
현재 아래부분은 JQuery를 사용하여 Ajax를 통해 사용자 정보를 받아 해당 정보 확인 후 해당 사용자의 Key값을 Return 하는 부분이다.
해당 키값이 있을 경우에는 키값과 버튼이 같이 생겨 버튼을 눌렀을 시에 해당 Key값을 클립보드에 저장을 한다.
아래는 해당 Javascript이다.
|
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
32
33 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submitBt").click(function(){
var action = $("#form1").attr('action');
var form_data = {
userId : $("#userId").val(),
userPswd : $("#userPswd").val()
};
$.ajax({
type:"POST",
url : action,
data : form_data,
success : function(response){
var jsonData = eval("("+response+")");
var resText = "사용자 정보 불일치";
if(jsonData.OPEN_API_KEY.length != 0){
resText = '<span id="apiKey">'+jsonData.OPEN_API_KEY;
resText += '</span> <input type="button" id="copyBtn"';
resText +='class="copyBtn" value="Api Key Copy" onClick="copyClip()">';
}
$("#resDiv").html(resText);
}
})
});
});
function copyClip(){
var doc = document.body.createTextRange();
doc.moveToElementText(document.all("apiKey"));
doc.select();
doc.execCommand('copy');
alert("클립보드로 복사 되었습니다");
} |
아래는 HTML body.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<body>
<div class="wrapper">
<h3>Test</h3>
<form id="form1" action="login.do" method="post">
<fieldset>
<label for="userId">아이디 : </label>
<input type="text" id="userId" name="userId" class="loginInput" /><br />
<label for="userPswd">비밀번호 : </label>
<input type="password" id="userPswd" name="userPswd" class="loginInput"/><br /><br />
<center>
<input type="button" id="submitBt" value="로그인" class="submitBt"/><br /><br />
</center>
</fieldset>
</form>
</div>
<div id="resDiv"></div>
</body> |
해당 소스 Converter (http://prev.kr/app/ColorScripter/)