勉強したことのメモ

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

  関連記事

PHPとSQLiteでi-mobileのデータをグラフ化する方法

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...