Laravel发送邮件后页面重载，如何让表单元素自动获焦？

算力阿峰

2026-5-25

解决Laravel页面重载后表单元素自动获焦的问题

你的思路其实已经找对方向了——利用Laravel的Session闪存消息来触发前端的JavaScript逻辑，实现页面重载后让指定表单元素获焦。不过可以调整几个细节，让这个逻辑更稳定、体验更好：

优化现有代码的小建议

去掉阻塞式的alert
你当前代码里的alert('abcd')会暂停JavaScript的执行，直到用户点击确认按钮才会继续设置焦点。如果只是需要提示用户邮件发送成功，你已经有了Bootstrap的alert组件，完全可以去掉这个弹窗，让流程更顺畅。
确保元素存在再设置焦点
虽然$(document).ready()会在DOM加载完成后执行，但保险起见，最好先检查目标元素是否存在，避免控制台出现找不到元素的报错。调整后的代码如下：

@if(Session::has('flash_message'))
    <div class="alert alert-success">{{ Session::get('flash_message')}}</div>
    <script>
        $(document).ready(function(){
            const targetElement = $('[name=sentMessage]');
            // 检查元素是否存在，再执行焦点设置
            if(targetElement.length){
                targetElement.focus();
            }
        });
    </script>
@endif

更可靠的原生JS方案（无需jQuery）

如果你不想依赖jQuery，也可以用原生的DOMContentLoaded事件，兼容性同样很好，逻辑也更清晰：

@if(Session::has('flash_message'))
    <div class="alert alert-success">{{ Session::get('flash_message')}}</div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const targetElement = document.querySelector('[name=sentMessage]');
            if(targetElement){
                targetElement.focus();
            }
        });
    </script>
@endif