JavaScript - 文法 - タブアクティブ時にフォーカスをあてる




　クラウディア












1.　概要									


2.　タブアクティブ時にフォーカスをあてる	


3.　やってみる							


4.　参考サイト							




1.　概要


　表題は、いささか言葉足らずになります。
　正確には、「ブラウザのタブがアクティブになったときに、特定の『INPUT』のテキストを選択して、フォーカスをあてる」ということがやりたかったのでした。


2.　タブアクティブ時にフォーカスをあてる


　これは、例えば、次のようなタグと。



<form name="request" action="" method="POST">@csrf
　　このテキストが
　　<input type="text" id="select_text" name="select_text" style="text-align: center;" value="このテキスト" size="34">
</form>



　次のような「javascript」のコードで実現できます。



const input = document.getElementById('select_text');

document.addEventListener('visibilitychange', () =>
{
    if (document.visibilityState === 'visible')
	{
        input.focus();  // フォーカスを当てる
        input.select(); // テキストを選択状態にする
    }
});



　ちなみにこのスクリプトは、「head」部に仕込んではだめです。
　「input」が展開された後に記述しないと、正常に動作できません。

　「input」の「id」を使用して、「document.getElementById()」を使っています。
　一応、「name」も使用できるようで、「document.getElementsByName()」という書き方もできるようですが。
　「ChatGPT」くんのいうことにゃ。
　「id」は、コンテンツ内で、ユニークであることが必須で、「name」は同じものが複数あること可能であるそうで。
　「name」を使う場合は。



const inputsByName = document.getElementsByName('select_text');
const inputByName = inputsByName[0];



　てな感じで、いったん配列にして取り直すことが必要になるので、「id」を使う方が、誤りが少ないとのことでした。


3.　やってみる



　　このテキストが
　　

　上記に仕込んであります。
　本ページのソースを見れば、わかるかと思います。
　ブラウザのタブをいったん別のタブへ移動して、ここへ戻ってくると上記のテキストが選択状態になって、フォーカスがあたっているはずです。


4.　参考サイト


　本ページは、「ChatGPT」くんを参考にさせていただきました。





AbemaTV　無料体験