Twitter 引导程序 - 单击时专注于模态内的 textarea [英] Twitter bootstrap - Focus on textarea inside a modal on click

问题描述

刚开始玩 bootstrap，真是太棒了.

我正在努力解决这个问题.我在模态窗口中有一个用于反馈的文本区域.它工作得很好.但是我希望当您单击按钮激活模态时将焦点放在 textarea 上.我似乎无法让它工作.

这是一个小提琴:http://jsfiddle.net/denislexic/5JN9A/4/

代码如下:

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a><div class="modal hide" id="myModal"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h3>模态头</h3>

<div class="modal-body"><textarea id="textareaID"></textarea>

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">关闭</a><a href="#" class="btn btn-primary">保存更改</a>

</div>

这里是JS

$('.testBtn').on('click',function(){$('#textareaID').focus();});

恢复当我点击启动模态"时，我希望显示模态并将焦点放在 textarea 上.

感谢您的帮助.

解决方案

它不起作用，因为当您单击按钮时，模式尚未加载.您需要将焦点与事件挂钩，然后转到 bootstrap 的模态页面我们看到事件shown，当模态对用户可见(将等待css转换完成)​​时触发.而这正是我们想要的.

试试这个:

$('#myModal').on('shown', function () {$('#textareaID').focus();})

这是你的小提琴更新:http://jsfiddle.net/5JN9A/5/><小时>

更新:

正如 @MrDBA 所指出的，在 Bootstrap 3 中，事件名称是 已更改 为 shown.bs.modal.因此，对于 Bootstrap 3 使用:

$('#myModal').on('shown.bs.modal', function () {$('#textareaID').focus();})

Bootstrap 3 的新小提琴:http://jsfiddle.net/WV5e7/

Just starting to play around with bootstrap and it's amazing.

I'm trying to figure this out. I have a textarea for feedback inside a modal window. It works great. But I want the focus to go on the textarea when you click on the button to activate the modal. And I can't seem to get it working.

Here is a fiddle: http://jsfiddle.net/denislexic/5JN9A/4/

Here is the code:

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Here is the JS

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});​

To resume When I click on "Launch modal" I want the modal to show up and the focus to go on the textarea.

Thanks for any help.

解决方案

It doesn't work because when you click the button the modal is not loaded yet. You need to hook the focus to an event, and going to the bootstrap's modals page we see the event shown, that is fired when the modal has been made visible to the user (will wait for css transitions to complete). And that's exactly what we want.

Try this:

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
​

Here's your fiddle updated: http://jsfiddle.net/5JN9A/5/

---

Update:

As @MrDBA notes, in Bootstrap 3 the event name is changed to shown.bs.modal. So, for Bootstrap 3 use:

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})

New fiddle for Bootstrap 3: http://jsfiddle.net/WV5e7/

这篇关于Twitter 引导程序 - 单击时专注于模态内的 textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！