728x90
목동코딩 : AI-Academy.kr
프로젝트를 진행하다 보면 항상 변수가 발생한다.
왜냐하면 Client의 요구사항이 항상 이상적인 것을 향하기 때문이다.
이번 프로젝트에서 계좌번호를 복사하여 사용하는 기능이 필요했다. 아래와 같은 방법을 사용하면 잘 작동했다.
문제는 modal 폼을 사용할때 이다.
인터넷을 검색해 보니
" clipboard.js 와 bootstrap Modal을 사용하면 정상 작동 하지 않는 이슈가 있다."
문제 원인은.
"modal에서 모달창의 focus 상태를 유지하기 위해 강제 포커스를 시키는 함수로 인해 클립보드에 복사하려는 지점의 위치를 잃게되는 이슈"이다.
이것을 해결하는데 이틀을 허비했다.
항상 이럴때 마다 느끼는 것은 전진을 못하고, 제자리 걸음을 한 기분이다. 물론 맨손 체조를 해도 효과가 있으니 단순한 제자리 걸음은 아니었기를 바란다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<title>Clipboard Copy</title>
</head>
<body>
<input type="button" id="test" value="내용 복사하기" data-clipboard-text="copy sentence"/>
<script>
$(function () {
var clipboard = new ClipboardJS('#test');
clipboard.on('success', function () {
alert("복사되었습니다.");
});
});
</script>
</body>
</html>애가 작성한 코드는 <span> 태그를 사용했다
그래서 아래와 같은 방법으로 해결했다
<span ><textarea id="id" style="height:30px;border: none;resize: none;"><?=$list_bank_number3[$i]?></textarea></span>
이제 잘 작동한다
728x90
'코딩교육 > Web' 카테고리의 다른 글
| 목동코딩학원, html, 추가버튼으로 동적인 <div></div> 만들때 id를 다르게 부여하는 방법 (0) | 2023.04.19 |
|---|---|
| 목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법 (0) | 2023.04.18 |
| 목동코딩학원, javascript , 동적으로 테이블 열 합치는 방법 (0) | 2023.04.11 |
| 목동코딩학원, document.createElement('form')으로 새창여는 방법 (0) | 2023.04.11 |
| 목동코딩학원, ajax로 Data를 가져와서 테이블에 표시하는 방법 (0) | 2023.04.02 |