我有一个带有一些文本字段的表单,我想在页面加载时将光标(自动焦点)放在表单的第一个文本字段上.
我想在不使用javascript的情况下这样做.
我从示例中得到以下模态形式:
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Enter something: <input type="text" id="myInput">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
我希望在显示模态后我的输入字段会被聚焦.
我尝试了自动对焦和将场焦点设置在$('modal').shown()事件上.它有点聚焦场(我有另一个事件,当场聚焦时显示标签)但实际上场没有聚焦,我必须按TAB再次聚焦.我也尝试过这样的事情:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
并autofocus:"autofocus"为我的字段设置属性.它产生了同样的效果.
我试过的一切都适用于模态只是一个普通的div,它会集中在页面加载上.但是当按钮触发模态时 - 没有任何作用(当然我也改变了逻辑,当模态只是一个普通的div时我可以将它集中在onload上,当我按下按钮时我会考虑它并尝试相应地解决它).
我想要的只是在加载模态后要聚焦的字段,以便它有闪烁的光标,用户可以开始输入.
唯一有用的是改变bootstrap.js本身,我把它$("#myInput").focus()放在bootstrap.js模式部分里面,但是我忘了它在哪里,第二 - 我认为改变bootstrap.js …
动态创建的表单包含输入元素.第一个元素可能被禁用或只读.我累了下面的代码将焦点设置为first elemnt,它接受数据以启用快速数据输入键盘.但是,如果形成拳头元素是禁用或只读,则不设置焦点.如何将焦点设置为接受数据的第一个元素？
<form style='margin: 30px' id="Form" class='form-fields' method='post' target='_blank'
action='Report/Render'>
...
<input id='_submit' type='submit' value='Show report' class='button blue bigrounded' />
</form>
<script type="text/javascript">
$(function () {
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea');
elements[0].focus();
elements[0].select();
});
</script>
更新
还有隐藏的输入字段,抱歉.答案提供了设置焦点隐藏元素.包含函数的Answr没有找到任何元素.
这是更新测试用例:
$(function () {
$("#form :input:not([readonly='readonly']):not([disabled='disabled'])").first()
.focus();
});
如何将焦点设置为vist visible,enabled和not readonly元素？
更新3
我尝试了添加输入元素的Row W代码.现在它将焦点放在第二个元素上.测试用例显示在Rob W的答案修订版5中
我正在尝试集中(使插入符号,就像它被点击一样)textarea和/或textfield,根据这个:如何使用jQuery专注于页面加载的表单输入文本字段？
我真的不明白为什么它不起作用.在这个页面上:http://gojobr.com.au/blog/working-as-a-teacher/ 这,不起作用(它什么都不做):
$("#author").focus()
与此页面相同:http://twoggle.com
$("#BlogRequestForm_name").focus()
我可以使用此选择器隐藏和显示元素,但.focus()不执行任何操作.零.小人物.
任何帮助将非常感激.
使用firefox(但它在Chrome中也不起作用).
它适用于其他任何人(使用Firebug的控制台)吗？
谢谢gvanto
我似乎无法在IE 11中使用它,我创建了一个非常简单的jsfiddle:http://jsfiddle.net/0qwbr7gh/ 使用以下输入框:
<input type="text" autofocus/>
在chrome中它按预期工作,输入字段专注于加载.在IE 11中它没有.
微软表示,它的网站上还支持一个例子.此外,它还支持:http: //caniuse.com/#feat=autofocus
我错过了什么？