클립보드에서 텍스트 상자에 복사된 내용을 단추로 붙여넣을 수 없습니다

8105 단어 JavaScript
주의: 이 페이지에서는 '단추를 사용하여 복사한 내용을 클립보드에서 텍스트 상자에 붙여넣기' 하는 방법을 모릅니다.
  • 동작을 확인한 브라우저
  • Windows10 Pro 64bit
  • GoogleC hrome 78.0
  • Fire Fox 70.0
  • Microsoft Edge 44.18362
  • Internet Explorer 11.418
  • MacOS Mojave 10.14.6
  • Google Chrome 78.0
  • Fire Fox 70.0
  • Safari 13.0
  • 하고 싶은 일


    단추를 누르면 클립보드에 복사된 텍스트를 임의의 텍스트 상자에 붙여넣습니다.
    버튼이 텍스트를 복사하는 방법은 다음과 같다.

    IE에서만 붙여넣기 가능


    (참조)클립보드를 사용하여 복사 및 붙여넣기 - Qita
    /** [貼付ける]ボタン押下処理. */
    function onClickPaste() {
        let tagetId = 'pasteArea';
        let content = window.clipboardData.getData("Text");
        $(tagetId).val(content);
    }
    

    IE 이외의 경우에는 붙이면 안 돼요.


    Document.execCommand 해봤는데 안 붙어요.


    Mac의 FireFox
    /** [貼付ける]ボタン押下処理. */
    function onClickPaste() {
        let tagetId = 'pasteArea';
        $(tagetId).focus();
        let result = document.execCommand('paste');
        alert('張付けの結果:' + result);
    }
    
    result'가짜'일 수 있어 사용할 수 없습니다.
    값을 깎다
    Boolean에서 명령이 대응하지 않거나 유효하지 않으면 가짜입니다.
    Document.execCommand() - Web API | MDN

    Async Clipboard API를 시도했지만 붙여넣을 수 없습니다.


    Unblocking Clipboard Access  |  Web  |  Google Developers
    Mac의 Chrome
    /** [貼付ける]ボタン押下処理. */
    function onClickPaste() {
        let tagetId = 'pasteArea';
        navigator.clipboard.readText().then((text) => {
            $(tagetId).val(text);
        });
    }
    

    브라우저에 붙여넣기 라이센스가 설정되어 있지만 붙여넣을 수 없습니다.


    클립보드에서 읽기
    붙여넣기를 사용하려면 clipboard Read perrmission이 필요합니다.
    클립보드와의 대화 - Mozill | MDN
    구체적으로 어떻게 하면 좋을지 잘 몰라서 크롬으로 비슷한 설정을 해봤는데 붙이지 못했다.
  • Google Chrome
  • [설정]>[상세 설정]>[프라이버시 및 보안]>[사이트 설정][클립보드]
  • 확인 대화 상자 표시: [클립보드...(생략)...웹 사이트 허용 안 함]을 ON으로 설정하면 [웹 사이트가 클립보드에서 복사한 텍스트나 그림을 방문할 때 확인(추천)]
  • 로 변경됩니다.
  • [허가]의 [추가] 버튼을 사용하여 웹 사이트 등록
  • Mac의 Chrome

    HTML 사용

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" charset="utf-8">
        <title>貼付けをJavaScriptでやってみる</title>
        <script src="https://code.jquery.com/jquery-1.11.0.min.js" integrity="sha256-spTpc4lvj4dOkKjrGokIrHkJgNA0xMS98Pw9N7ir9oI=" crossorigin="anonymous"></script>
        <script src="sample.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>貼付け場所</td>
                <td><input id="pasteArea" type="text"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" id="paste" value="貼付ける" onclick="onClickPaste();"></td>
            </tr>
        </table>
    </body>
    </html>
    

    좋은 웹페이지 즐겨찾기