jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
2024/01/13
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でjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
-
-
簡単にtable内をソート
やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...