勉強したことのメモ

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

  関連記事

セレクトメニューにサジェスト機能をつける方法(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

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

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

jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法

jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...