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 Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...
-
-
「display: block !important;」指定された要素をjQueryで非表示にする方法
jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...
-
-
jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法
jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...