2

I am trying to set the focus of an input field inside my form when I reveal a modal using ZURB Foundation framework. I am really truly sorry if this question has been asked before I've been having problems finding a solution to this for a while.

This is what I have:

<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>

Everytime I click a button this modal pops up and I want my input field (textarea) to be in focus when I do that. I tried adding the autofocus attribute and I also tried using javascript to set the focus when I click the button or when this div shows or loads (onshow and onload methods). Nothing seems to work for me so any help will be much appreciated.

4

2 回答 2

6

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

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

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

于 2015-03-11T10:18:28.463 回答
1

在 Foundation 6 中，事件名称已更改：

$(document).on('open.zf.reveal', '[data-reveal]', function () {
    console.log('asdfasdfsadf')
    var modal = $(this);
    modal.find('[autofocus]').focus();
});
于 2017-09-25T22:12:00.713 回答