LoginSignup
21
18

More than 3 years have passed since last update.

javascriptのクリップボードにコピーでめっちゃくちゃ詰まったからメモしとく

Last updated at Posted at 2018-06-15

とりあえずコード載せます

See the Pen javascript cripboard copy by 中村@ガウチャ (@_nakashimamura) on CodePen.

<input type="text" id="target_text" value="ここにコピーしたい値が入るよね" onfocus="this.select();" readonly>
<button id="copy_btn">コピー</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#copy_btn').on('click', function() {
        var target = null;
        var p = null;
        window.getSelection().removeAllRanges();
        if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
            target = document.querySelector('#target_text');
            target.contentEditable  = true;
            target.readOnly = false;
        } else {
            p = document.createElement('p');
            p.setAttribute('id', 'target')
            document.body.appendChild(p);
            p.innerHTML = $('#target_text').val();
            target = document.querySelector('#target');
        }
        var range = document.createRange();
        range.selectNode(target);
        window.getSelection().addRange(range);
        document.execCommand("copy");
        if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
            target.contentEditable  = false;
            target.readOnly = true;
        } else {
            document.body.removeChild(p);
        }
        window.getSelection().removeAllRanges();
    });
});
</script>

これで一通り動くはず。なんです。
いいコードじゃないのはわかっているんだ、が・・

何で詰まったのか。。。

いまだ理由はわからないんですけど、発火イベントにtouchstartを使わず、click指定したら無事、私が確認した最新ブラウザたちで動きました。

スマホ対応もかねて、jsで.on('click',function(){});ってするときに
スマホならtouchstartを、
PCならclickを、ってやってたんです。
参考サイト様:jQueryで、on()にclickとtouchstartを併記したら、スマホでのタップイベントの動作がおかしくなった

だけど、スマホで一切のコピーが動かない事態が起きたんです。
touchstartで発火させたイベントだと、document.execCommand("copy");が動かない・・・
いつもfalseが返ってくる・・・なんだこれ・・・でした。
理由がわからないけれど、動いたからいいや状態:frowning2::frowning2:

とりあえずちょっとだけコード説明

iOSと他ブラウザで分けている理由としてはiOS10の改悪アップデートからクリップボードにコピーの制約がめんどくさくなってためです。
いや、長いことjs書いてなかったから本気で無知すぎました。。

詳しくはこちら:Copy to clipboard using Javascript in iOS - Stack Overflow
EIGO DAYO:disappointed_relieved:

要約すると、

  • input/textareaじゃないとコピー実施できないよ
  • formタグの外にいる場合は、contenteditable属性(編集できること)で
  • readonly属性(読み込み専用)だったらダメだよ
  • コピー対象は選択範囲内にないとダメだよ

って言われたためです。

じゃあiOS用の記述だけで動くかな?と思って試したら、firefoxとIE/Edgeが死にました:innocent::innocent::innocent:

でも以下一行で動くようになったのです・・が・・・

target.select();

そうするとどうなったかっていうと、またiOS safariちゃんがごにょごにょしたんですよ。
それから、結果ああなりました(省略)

ほかのコードの説明に関してはネットに山のように落ちているので、ご参照くださいまし。
かしこ。

21
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
18