CODEWITHSUNDEEP
htmlinputmodal-dialogzurb-foundationzurb-foundation-5
Kanga
Kanga

Reputation: 125

Zurb foundation can't focus input field inside modal

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.

Upvotes: 2

Views: 2121

Answers (2)

Dave Brondsema
Dave Brondsema

Reputation: 1147

With Foundation 6 the event name has changed:

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

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362440

I think you'll have to use JS or jQuery to handle the opened event like this..

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

Demo: http://codeply.com/go/Ahs4oZDsWn

Upvotes: 6

Related Questions