🐡

要素がクリックされた時、全選択する(jQuery)

2022/08/25に公開

背景

jQueryで特定範囲をクリックされたら全選択をさせる、という挙動を実装したかったのでログとして残しておく。

実装

all-select.js
// コードの中身がクリックされた時、全選択する
$('.selecter').on('click', function() {
    selectAllText(this);
});

// テキストを全選択する
function selectAllText(obj) {
    // 範囲を取得
    let range = document.createRange(); // Rangeオブジェクト用意
    range.selectNodeContents(obj); // 要素の中身全部取得

    // ユーザーが選択した要素の取得
    let selection = window.getSelection(); // 選択要素・範囲の取得
    selection.removeAllRanges(); // 選択範囲の初期化

    // 選択要素を全選択
    selection.addRange(range); // 選択範囲を要素全体に適用
}

参考ページ

https://xxxx7.com/2014/10/31/092757

Discussion