勉強したことのメモ

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

  関連記事

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

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

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