{"id":267,"date":"2020-07-17T03:51:28","date_gmt":"2020-07-17T03:51:28","guid":{"rendered":"https:\/\/aki-hamano.blog\/?p=267"},"modified":"2025-10-25T03:54:45","modified_gmt":"2025-10-25T03:54:45","slug":"jquery-focus","status":"publish","type":"post","link":"https:\/\/aki-hamano.blog\/ja\/2020\/07\/17\/jquery-focus\/","title":{"rendered":"Tab\u30ad\u30fc\u79fb\u52d5\u3067\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u3001\u7279\u5b9a\u306e\u7bc4\u56f2\u5185\u306b\u5236\u9650\u3059\u308bjQuery"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u3054\u5b58\u3058\u306e\u65b9\u3082\u591a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001Web\u30b5\u30a4\u30c8\u3067Tab\u30ad\u30fc\u3092\u62bc\u4e0b\u3059\u308b\u3068\u3001\u30dc\u30bf\u30f3\u30fb\u30ea\u30f3\u30af\u30fb\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306a\u3069\u306b\u9806\u756a\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u308a\u307e\u3059\u3002 \uff08Shift\u30ad\u30fc\u3092\u62bc\u3057\u305f\u307e\u307eTab\u30ad\u30fc\u3092\u62bc\u3059\u3068\u3001\u9006\u306b\u8fbf\u308b\uff09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u3067\u554f\u984c\u306b\u306a\u308b\u306e\u304c\u3001\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u306a\u3069\u306e\u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u3044\u3066\u3044\u308b\u6642\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u3068\u3057\u3066\u306f\u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u30ea\u30f3\u30af\u3060\u3051\u3092\u8fbf\u308a\u305f\u3044\u306f\u305a\u306a\u306e\u3067\u3001\u88cf\u5074\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3067\u3059\u304c\u4f55\u3082\u5bfe\u7b56\u3092\u3057\u3066\u3044\u306a\u3044\u3068\u3001\u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u6700\u5f8c\u306e\u30e1\u30cb\u30e5\u30fc\u30ea\u30f3\u30af\u3092\u904e\u304e\u305f\u3089\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u88cf\u5074\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u79fb\u52d5\u3057\u3066\u3057\u307e\u3063\u3066\u3001\u300c\u4eca\u3069\u3053\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u5f53\u305f\u3063\u3066\u308b\u3093\u3084\uff01\u300d\u300c\u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u623b\u3059\u306e\u5927\u5909\u3084\u3093\u3051\uff01\u300d\u3068\u30b9\u30c8\u30ec\u30b9\u3092\u4e0e\u3048\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u7406\u60f3\u7684\u306a\u6319\u52d5\u306e\u4e00\u3064\u3068\u3057\u3066\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u3082\u306e\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u3044\u305f\u76f4\u5f8c\u306f\u3001\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u3063\u3066\u3044\u308b\u4e8b\u3002<\/li>\n\n\n\n<li>\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u3044\u3066\u3044\u308b\u72b6\u614b\u3067\u306f\u3001Tab\u30ad\u30fc\uff08+Shift\u30ad\u30fc\uff09\u3067\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5\u3092\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u8981\u7d20\u306b\u9650\u308b\u4e8b\u3002<\/li>\n\n\n\n<li>\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u6700\u5f8c\u306e\u8981\u7d20\u3092\u904e\u304e\u305f\u3089\u3001\u6b21\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u306f\u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u6700\u521d\u306e\u8981\u7d20\u306b\u623b\u308b\u4e8b\u3002\u9006\u306b\u3001\u6700\u521d\u306e\u8981\u7d20\u3067Tab+Shift\u30ad\u30fc\u3092\u62bc\u4e0b\u3057\u305f\u6642\uff08\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u9006\u306b\u8fbf\u308b\u6642\uff09\u306f\u3001\u6700\u5f8c\u306e\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u308b\u4e8b\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u8981\u4ef6\u3092\u6e80\u305f\u3059\u305f\u3081\u306ejQuery\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>$( function() {\n    \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\n    var modalMenu = $( '#modal_menu' );\n\u200b\n    \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u304c\u958b\u3044\u3066\u3044\u308b\u304b\u3069\u3046\u304b\n    var isOpenModalMenu;\n\u200b\n \u00a0 \u00a0\/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u3067\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u305f\u3044\u8981\u7d20\u30ea\u30b9\u30c8\n    var modalMenuElements = modalMenu.find( 'a, button' );\n\u200b\n    \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u958b\u304f\n    $( '#open_modal' ).click( function() {\n        isOpenModalMenu = true;\n        $( '#close_modal' ).focus();\n        modalMenu.show();\n    });\n\u200b\n    \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b\n    $( '#close_modal' ).click( function() {\n        isOpenModalMenu = false;\n        modalMenu.hide();\n    });\n\u200b\n    \/\/ \u30ad\u30fc\u30a4\u30d9\u30f3\u30c8\n    $( document ).keydown( function( event ) {\n\u200b\n        \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u304c\u958b\u304b\u308c\u3066\u3044\u305f\u5834\u5408\n        if ( showDrawer ) {\n\u200b\n            \/\/ \u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u3063\u3066\u3044\u308b\u8981\u7d20\n            var activeEl = document.activeElement;\n\u200b\n            \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u3067\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u305f\u3044\u6700\u521d\u306e\u8981\u7d20\n            var firstEl = modalMenuElements&#91;0];\n\u200b\n            \/\/ \u30e2\u30fc\u30c0\u30eb\u30e1\u30cb\u30e5\u30fc\u5185\u3067\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u305f\u3044\u6700\u5f8c\u306e\u8981\u7d20\n            var lastEl = modalMenuElements&#91; modalMenuElements.length - 1 ];\n\u200b\n            \/\/ \u30bf\u30d6\u30ad\u30fc\u3092\u62bc\u3055\u308c\u305f\u304b\u3069\u3046\u304b\n            var tabKey = ( 9 === event.keyCode );\n\u200b\n            \/\/ Shift\u30ad\u30fc\u304c\u62bc\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\n            var shiftKey = event.shiftKey;\n\u200b\n            \/\/ \u6700\u5f8c\u306e\u8981\u7d20\u3067\u30bf\u30d6\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u5834\u5408\u306f\u3001\u6700\u521d\u306e\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u308b\n            if ( ! shiftKey &amp;&amp; tabKey &amp;&amp; lastEl === activeEl ) {\n                event.preventDefault();\n                firstEl.focus();\n            }\n\u200b\n            \/\/ \u6700\u521d\u306e\u8981\u7d20\u3067\u30bf\u30d6\u30ad\u30fc+Shift\u30ad\u30fc\u304c\u62bc\u3055\u308c\u305f\u5834\u5408\u306f\u3001\u6700\u5f8c\u306e\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f53\u3066\u308b\n            if ( shiftKey &amp;&amp; tabKey &amp;&amp; firstEl === activeEl ) {\n                event.preventDefault();\n                lastEl.focus();\n            }\n        }\n    });\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u53c2\u8003<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Twenty Twenty\uff08WordPress\u516c\u5f0f\u30c6\u30fc\u30de\uff09 <a href=\"https:\/\/github.com\/WordPress\/twentytwenty\/blob\/db82df5cb0293db15911b045471cee3f5f0ac389\/assets\/js\/index.js#L442\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/WordPress\/twentytwenty\/blob\/db82df5cb0293db15911b045471cee3f5f0ac389\/assets\/js\/index.js#L442<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u203b\u7d20\u306ejavascript\u3092\u30b9\u30e9\u30b9\u30e9\u66f8\u3051\u308b\u4eba\u306f\u3001\u3053\u3061\u3089\u306e\u65b9\u304c\u53c2\u8003\u306b\u306a\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3054\u5b58\u3058\u306e\u65b9\u3082\u591a\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001Web\u30b5\u30a4\u30c8\u3067Tab\u30ad\u30fc\u3092\u62bc\u4e0b\u3059\u308b\u3068\u3001\u30dc\u30bf\u30f3\u30fb\u30ea\u30f3\u30af\u30fb\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306a\u3069\u306b\u9806\u756a\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u308a\u307e\u3059\u3002 \uff08Shift\u30ad\u30fc\u3092\u62bc\u3057\u305f\u307e\u307eTab\u30ad\u30fc\u3092\u62bc\u3059\u3068\u3001\u9006\u306b\u8fbf\u308b\uff09 \u3053\u3053\u3067\u554f\u984c\u306b\u306a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_locale":"ja","_original_post":"https:\/\/aki-hamano.blog\/?p=267","footnotes":""},"categories":[10],"tags":[],"class_list":["post-267","post","type-post","status-publish","format-standard","hentry","category-tips","ja"],"_links":{"self":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":4,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aki-hamano.blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}