html - 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 属性，还尝试在单击按钮或此 div 显示或加载时使用 javascript 设置焦点(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