질문/조언질답게시판
Extra Form
PHP PHP 7.3
CMS XpressEngine

간단한 버튼으로 게시글 복사하기를 처리하고싶습니다

 

<!--게시물 주소 복사-->
                <div class="side">
                <input id="url_field" type="url" value="{$oDocument->getPermanentUrl()}" readonly="readonly">
                <input id="copy_btn" type="button" value="복사">
                <script>
                var copyBtn = document.querySelector('#copy_btn');
                copyBtn.addEventListener('click', function () {
                var urlField = document.querySelector('#url_field');
                urlField.select();
                document.execCommand('copy'); // or 'cut'
                }, false);
                </script>
                </div>
<!--게시물 주소 복사 끝-->

 

"주소" "복사하기 버튼" 이렇게나오는데

input id="url_field" type="url" value="{$oDocument->getPermanentUrl()}" readonly="readonly"> 주소표시없이 복사버튼을 누르면 주소가 복사되게 하고싶어 아래처럼 수정하였습니다

 

<!--게시물 주소 복사-->
                <div class="side">
                <input id="copy_btn" type="button" value="복사">
                <script>
                var copyBtn = document.querySelector('#copy_btn');
                copyBtn.addEventListener('click', function () {
                var urlField = {$oDocument->getPermanentUrl()}
                urlField.select();
                document.execCommand('copy'); // or 'cut'
                }, false);
                </script>
                </div>
<!--게시물 주소 복사 끝-->

 

이렇게 해보았는데 해당글주소가 클립보드에 저장되는게 아니라,  "{$oDocument->getPermanentUrl()}"가  그대로 클립보드에 저장됩니다.

 

방법알려주시면 감사하겠습니다

  • profile
    다른 방법이 여기에 검색하면 조금 나올거에요 그것으로 하는게 어떨까요
  • profile ?
    네,, 보드클립js 아마 구미호님이 올려주셨던거같은데 그방법으로 해보니
    https://github.com/PrismJS/prism/issues/1181
    위처럼 오류가나서 제가 질문올린 방법대로 시도해봤습니다
  • profile ?
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>


    <!--게시물 주소 복사-->
    <button class="btn-clipboard" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">게시물 주소복사</button>
    <!--게시물 주소 복사 끝-->

    버튼: CSS :

    .btn-clipboard {display:inline-block;color: #fff;font-size: 11px;border: 1px solid #007dc1;border-radius: 3px;margin: -4px 0 0 3px;padding: 2px 10px 3px 10px;background: #006db2;text-decoration:none}

    스크립트

    <!--클립보드 JS 및 스타일 설정 시작-->
    <script src="/modules/board/skins/sketchbook5/js/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.btn-clipboard', {
    text: function() {
    return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';
    }
    });
    clipboard.on('success', function(e) {
    console.log(e);
    });
    clipboard.on('error', function(e) {
    console.log(e);
    });
    </script>
    <!--클립보드 JS 및 스타일 설정 끝-->

    이렇게 사용해봤는데

    var clipboard = new Clipboard('.btn-clipboard', {
    이부분에서
    Uncaught TypeError: Illegal constructor
    at <anonymous>:2:20
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)

    이렇게 에러가 나옵니다
  • ?

    https://clipboardjs.com/

    이거 사용해보세요~

  • ? ?
    처음에 그거 사용해서 해보려 했는데요

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>


    <!--게시물 주소 복사-->
    <button class="btn-clipboard" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">게시물 주소복사</button>
    <!--게시물 주소 복사 끝-->

    버튼: CSS :

    .btn-clipboard {display:inline-block;color: #fff;font-size: 11px;border: 1px solid #007dc1;border-radius: 3px;margin: -4px 0 0 3px;padding: 2px 10px 3px 10px;background: #006db2;text-decoration:none}

    스크립트

    <!--클립보드 JS 및 스타일 설정 시작-->
    <script src="/modules/board/skins/sketchbook5/js/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.btn-clipboard', {
    text: function() {
    return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';
    }
    });
    clipboard.on('success', function(e) {
    console.log(e);
    });
    clipboard.on('error', function(e) {
    console.log(e);
    });
    </script>
    <!--클립보드 JS 및 스타일 설정 끝-->

    이렇게 사용해봤는데

    var clipboard = new Clipboard('.btn-clipboard', {
    이부분에서
    Uncaught TypeError: Illegal constructor
    at <anonymous>:2:20
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)

    에러가 나옵니다.ㅜㅜ
  • ?

    스케치북 유튜브 게시판.JPEG

    스케치북 유튜브 게시판 보니 게시글 복사버튼이 기본 장착되어있던데 그걸 따서 붙이면 어떨까요?

  • ?
    https://gstar.bz/board_ynyQ87/285
    스케치북 유튜브 게시판꺼 옮겨다 쓰니 잘되네요.

서버에 요청 중입니다. 잠시만 기다려 주십시오...