在 Bootstrap 中启动 Modals 时如何在文本框上进行 .focus()
Posted
技术标签:
【中文标题】在 Bootstrap 中启动 Modals 时如何在文本框上进行 .focus()【英文标题】：How to .focus() on textbox when Modals are launched in Bootstrap 【发布时间】：2019-06-03 15:36:07 【问题描述】：当我打开这个 Modal 时，我需要用鼠标将光标移到文本框
所以我想在模式打开后立即focus() 在文本框上。
Css 和 JS 文件
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Javascript 代码
<script type="text/javascript">
$(document).ready(function()
$('.launch-modal').click(function()
$('#myModal').modal(
backdrop: 'static'
);
// document.form1.focushere.focus();
);
);
</script>
HTML 代码
<body>
<form name="form1">
<!-- Button html (to Trigger Modal) -->
<input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation Box</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="text" id="" name="focushere">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
【问题讨论】：
这有帮助吗？ ***.com/questions/26021493/… 我也喜欢这个，它使用一个简单的对话框打开事件***.com/questions/6291585/… 【参考方案1】：基本上它不起作用，因为未加载模式，因此没有任何 Javascript 可以保留的字段。
你可以修改代码来做这样的事情：
$('#myModal').on('shown.bs.modal', function()
document.form1.focushere.focus();
)
模态加载时会运行focus()函数。
看到这个答案：Twitter bootstrap - Focus on textarea inside a modal on click
【讨论】：
具体应该写在哪里。 @AjinkyaRathod 这替换了你注释掉的代码，这个// document.form1.focushere.focus();
我评论了那行，因为那行没有聚焦文本框
是的，但是用我的答案中的代码替换它，它现在应该可以工作了。看看这个 Jsfiddle：jsfiddle.net/wf714L9o以上是关于在 Bootstrap 中启动 Modals 时如何在文本框上进行 .focus()的主要内容，如果未能解决你的问题，请参考以下文章
通过 Bootstrap Modals PHP MySQL 创建搜索记录表单
Bootstrap Modals 关闭后继续向 body 添加 padding-right
如何将 twitter bootstrap modal 设置得越来越宽？