You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel中autofocus失效求助:实现输入框自动聚焦

Laravel 模态框中输入框自动聚焦问题解决方法

一、修正表单属性传递错误

你的Form::text调用错误地将属性拆分为两个数组,导致autofocus未被正确渲染到HTML元素上。需将所有属性合并到同一个数组中:

{!! Form::text('c', null, [
    'autofocus',
    'class' => 'form-control', 
    'required', 
    'placeholder' => __('product.product_name')
]); !!}

(注:HTML5标准中autofocus属性无需赋值,直接声明键名即可生效)

二、针对模态框的JavaScript补充方案

由于表单在模态框内,即使设置了autofocus,浏览器可能因模态框初始隐藏而不触发自动聚焦。需监听模态框的shown.bs.modal事件,在模态框完全显示后手动聚焦:

// 替换为你的模态框实际ID
$('#your_modal_id').on('shown.bs.modal', function () {
    // 根据输入框name属性定位元素
    $('input[name="c"]').focus();
});

三、验证最终渲染结果

修改后检查页面生成的HTML,确保输入框上存在autofocus属性:

<input type="text" name="c" class="form-control" required placeholder="Product Name" autofocus>

内容的提问来源于stack exchange,提问作者Shubham Singh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.10 17:20:27