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