JavaScriptでselectイベントを設定する方法！

JavaScriptのselectイベントについて書いています。
selectイベントは、ユーザーがテキストボックスやテキストエリアで文字列を選択したときに発生します。

下記について書いています。

・selectイベントとは？
・selectイベントの設定方法
・selectイベントをテキストボックスとテキストエリアで使う

selectイベントとは？

selectイベントは、テキストボックスやテキストエリア内でユーザーがテキストを選択したときに発生します。
このイベントを使用することで、選択されたテキストを取得したり、特定の動作を実行することが可能です。

selectイベントを設定する

selectイベントの設定には、onselect属性を直接使う方法とaddEventListenerメソッドを使用する方法があります。

DOMの属性を使って設定する

onselect属性を使うことで、selectイベントを設定することができます。
例えば、下記のように使うことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onselect Example</title>
</head>
<body>
    <input type="text" onselect="handleSelect()">
    <div>選択したテキスト: <span id="selectText"></span></div>
    <script>
        function handleSelect() {
            const selectText = document.querySelector('#selectText');
            selectText.innerHTML = window.getSelection().toString();
        }
    </script>
</body>
</html>

HTMLの解説

画面としてはinputタグを使って、テキストボックスを用意しています。
その下に選択したテキストを表示する場所を作りました。

inputタグにonselect属性を設定しています。
これで文字列を選択すると、渡している関数(handleSelect)を実行してくれます。

JavaScriptの解説

scriptタグにhandleSelect関数を用意しています。
document.querySelectorを使って、選択したテキストを表示するspanタグ(selectText)を取得しています。

「window.getSelection().toString()」とすることで、選択したテキストを取得できます。
そして取得した文字列を、selectTextのタグ内に入れるようにしました。

動作確認

実際に動作を確認してみると、下記のようになりました。
テキストボックスの文字列を選択すると、spanタグに表示されていることが確認できます。
JavaScriptのselectイベントの動作確認

addEventListenerを使ってイベントを設定する

addEventListenerメソッドを使うことでも、selectイベントを設定することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onselect Example</title>
</head>
<body>
    <input type="text" id="inputText">
    <div>選択したテキスト: <span id="selectText"></span></div>
    <script>
        window.onload = () => {
            const inputText = document.querySelector('#inputText');
            inputText.addEventListener('select', function() {
                const selectText = document.querySelector('#selectText');
                selectText.innerHTML = window.getSelection().toString();
            });
        }
    </script>
</body>
</html>

HTMLの解説

先ほどと同じようにテキストボックスとテキストを表示する場所を用意しています。
違うのはinputタグに、onselect属性をつけていないところです。

JavaScriptの解説

window.onloadで画面が読み込まれたときに処理するようにしています。
最初にテキストボックス要素(inputText)を取得しています。

そして、テキストボックス要素からaddEventListenerメソッドを呼び出して、selectイベントを設定しました。
第1引数がイベント名で、第2引数の関数がイベントが発生したときに処理される内容です。

先ほどと同様に、選択したテキストを表示する場所(selectText)を取得して
選択した文字列を入れるようにしています。

実際に動作を確認してみると、テキストボックスの選択した内容が表示されることが確認できました。

selectイベントをテキストボックスとテキストエリアで使う

selectイベントをテキストボックスとテキストエリアの両方で使ってみました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onselect Example</title>
</head>
<body>
    <input type="text" id="inputText1" /><br>
    <textarea type="text" id="inputText2"></textarea><br>
    <div>選択したテキスト: <span id="selectText"></span></div>
    <script>
        window.onload = () => {
            const inputText1 = document.querySelector('#inputText1');
            const inputText2 = document.querySelector('#inputText2');

            const showInputText = function() {
                const selectText = document.querySelector('#selectText');
                selectText.innerHTML = window.getSelection().toString();
            }

            inputText1.addEventListener('select', showInputText);
            inputText2.addEventListener('select', showInputText);
        }
    </script>
</body>
</html>

HTMLの解説

テキストボックス(inputText1)とテキストエリア(inputText2)を用意しています。
また、選択したテキストを表示する場所(selectText)を作りました。

JavaScriptの解説

画面を読み込んだ時に処理されるようにしています。

テキストボックス(inputText1)とテキストエリア(inputText2)を取得して、selectイベントを設定しました。
処理としては、それぞれの場所で文字列が選択されたときに、文字が表示されるようにしました。

動作確認

動作を確認してみると、テキストボックスとテキストエリアのそれぞれで、文字列が選択されると表示されるようになりました。
selectイベントをテキストボックスとテキストエリアで使う

終わりに

今回はselectイベントについて確認していきました。
記事の内容をまとめると、下記のようになります。

・selectイベントは文字列を選択したときに発生するイベント。
・テキストボックスとテキストエリアで発生することが確認できた。
・選択したテキストは`window.getSelection().toString()`で取得できた。

コメント