使 select 标签专注于页面加载

Question

我正在尝试在页面加载时对 select 标记进行自动对焦。但是我无法使用 autofocus 标签做到这一点。

 <select class="js-example-basic-single form-control" name="sel_bookID" id="sel_bookID" autofocus="autofocus" >
    @foreach ($arrayname as $data)                                       
        <option value="{{ $data->id }}">{{ $data->BookID }}</option>                                                      
    @endforeach
</select>

此处 autofocus="autofocus" 无效。我提到了问题 HTML select tag attribute similar to autofocus 但无法得到任何适当的解决方案。我们可以为 select 标签使用 javascript 或 jquery 进行自动对焦吗？

Answer 1

可以使用jQueryfocus()方法。当 DOM 准备就绪后，您需要将焦点设置在 select.

$(document).ready(function(){
    $('#sel_bookID').focus();
});

或使用纯 javaScript:

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('sel_bookID').focus();
}, false);

使 select 标签专注于页面加载

make select tag focus on page load

html

javascript

jquery

autofocus