게시글 주소 복사하기 버튼

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

<!--게시물 주소 복사-->
                <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()}"가  그대로 클립보드에 저장됩니다.

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