Keyboard shortcuts:
With Alpine
<div x-data @keydown.ctrl.s.window.prevent="$wire.save()">
<!-- Content -->
</div>Multiple Shortcuts
<div x-data
@keydown.escape.window="$wire.close()"
@keydown.ctrl.enter.window="$wire.submit()"
@keydown.ctrl.k.window.prevent="$wire.openSearch()"
>Arrow Navigation
<div @keydown.arrow-up="$wire.previous()"
@keydown.arrow-down="$wire.next()">
</div>Focus Input
<input x-ref="search"
@keydown.slash.window.prevent="$refs.search.focus()">Share this post:
Related Posts
Laravel Sanctum API Authentication Complete Guide
Build secure API authentication with Laravel Sanctum for SPAs and mobile apps.
Laravel Rate Limiting: Protect Your Application
Implement rate limiting to protect your Laravel application from abuse.
Laravel Blade Components: Build Reusable UI
Create powerful reusable components with Laravel Blade.
Comments (0)
Please log in to leave a comment. Log in
No comments yet. Be the first to comment!
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }
hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }