ボタンをクリックしてコピーするjqueryの解説 2：アーカイブ：ドラクエ10冒険・サイト運営ブログ

2018/08/05 09:10:24

ボタンをクリックしてコピーするjqueryの解説 2

～～～解説～～～

前回ありましたjqueryの1行目は特に必要なさそうでしたので削除しました。

▶▶$(".copy2").on("click",function(){
Classのcopy2をクリックしたら発火します

▶▶$(this).prev("label").children("input").prop("checked", true);
ボタンをクリックしたらチェックを付けます。
入力したかどうか忘れちゃう私向けの機能ですね。
別scriptでローカルストレージに保存します。
クリックした直前にあるlabelの中のinputという指定ですが、
もう少しうまく書けないものですかね。

▶▶var range = document.createRange();
▶▶range.selectNodeContents( $(this).next("span").get(0) );
選択する要素の設定です。
$(this).next("span").get(0)
つまりクリックした次のspanがその場所ですね
ここら辺はもうだいたい固定の関数でしょう

▶▶var selection = window.getSelection();
▶▶selection.removeAllRanges();
▶▶selection.addRange(range);
選択している部分です。

▶▶document.execCommand("Copy");
コピーする関数です。
固定ですね。

前回との違いは選択を変えてチェックボックスを一方通行で連動させただけですね。