勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

   2024/01/13  jQuery JavaScript

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあったのでメモ。

 

focusable

https://github.com/zzarcon/focusable

 

サンプル

https://taitan916.info/sample/focusable/

 

使い方

jQueryとプラグインを読み込んだ上で以下のような形で使用する。

$(function(){
    $('.show').on('click', show);
    $('.hide').on('click', hide);

    function show() {
        var selector = $(this).attr('data-selector');
        Focusable.setFocus(
            $(selector),
            {
                fadeDuration: 500,    //フェードするスピード
                hideOnClick: true,    //他の要素をクリックした時にフォーカスを消す
                hideOnESC: true,    //ESCキーを押した時にフォーカスを消す
            }
        );
    }

    function hide() {
        Focusable.hide();
    }
});

 - jQuery JavaScript

  関連記事

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

「display: block !important;」指定された要素をjQueryで非表示にする方法

jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...