Zurb 基金会无法将输入字段集中在模态内

Question

当我使用 ZURB Foundation 框架显示模态时，我试图在我的表单中设置输入字段的焦点。如果在我一直找不到解决方案之前就有人问这个问题，我真的很抱歉。

这是我的：

<div id="myModal" class="reveal-modal" data-reveal>
   <form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
      <label for="curse">Пиши си овде:</label>
      <textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
      <input type="submit" name="submit" class="button secondary tiny right" value="OK">
   </form>
   <a class="close-reveal-modal">&#215;</a>
</div>

每次我单击一个按钮时，都会弹出此模式，我希望我的输入字段（textarea）在我这样做时处于焦点。我尝试添加 autofocus 属性，我还尝试使用 javascript 在我单击按钮或此 div 显示或加载（onshow 和 onload 方法）时设置焦点。似乎没有什么对我有用，所以我们将不胜感激。

Answer 1

我认为你必须使用 JS 或 jQuery 来处理这样打开的事件..

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  var modal = $(this);
  modal.find('[autofocus]').focus();
});

演示：http://codeply.com/go/Ahs4oZDsWn

Answer 2

对于 Foundation 6，事件名称已更改：

$(document).on('open.zf.reveal', '[data-reveal]', function () {
    console.log('asdfasdfsadf')
    var modal = $(this);
    modal.find('[autofocus]').focus();
});

Zurb 基金会无法将输入字段集中在模态内

Zurb foundation can't focus input field inside modal

html

input

modal-dialog

zurb-foundation

zurb-foundation-5