Twitter引导 - 关注单击模式内的textarea [英] Twitter bootstrap - Focus on textarea inside a modal on click

问题描述

刚开始玩引导，这是惊人的。

我试图弄清楚这一点。我有一个模态窗口内的反馈textarea。它工作很好。但是当我点击按钮来激活模态时，我想把焦点放在textarea上。而我似乎无法得到它的工作。

这是一个小提琴： http：//

以下是代码： p> < a class =btn testBtndata-toggle =modalhref =＃myModal> Launch Modal< / a>

< div class =modal hideid =myModal>
< div class =modal-header>
< h3>模态标头< / h3>
< / div>
< div class =modal-body>
< textarea id =textareaID>< / textarea>
< / div>
< div class =modal-footer>
< a href =＃class =btndata-dismiss =modal>关闭< / a>
< a href =＃class =btn btn-primary>保存更改< / a>
< / div>





这里是JS

（$'code $>''testBtn'）。on（'click'，function（）{
$（'＃textareaID'）。focus（） ;
））;

要恢复
当我点击Launch modal时，我希望模态显示出来，并将焦点放在textarea上。

感谢您的帮助。 b $ b

解决方案

它不起作用，因为当你点击按钮时，模式还没有加载。您需要将焦点锁定到某个事件，然后转到引导程序的模式页我们看到事件显示为，当模式对用户可见时（等待css转换完成）​​被激发。 C $ C>。这正是我们想要的。

试试这个：

  $ （'#myModal'）。on（'shown'，function（）{
 $（'＃textareaID'）。focus（）; 
}）
 
  

这里是你的小提琴更新： http://jsfiddle.net/5JN9A/5/

---

更新：

正如 @MrDBA 所示，在Bootstrap 3活动名称已更改为 shown.bs.modal 。因此，对于Bootstrap 3使用：
$ b $ $ p $ $'（'＃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屋！