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基础无法将输入字段集中在模态内

2 个答案: