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にてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
-
-
jQueryで後から追加された要素にイベントを設定
jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
jQueryからAjax経由でPHPにリクエストしCookieを操作する方法
先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...