无法自动关注引导模式的字段

时间:2017-01-22 05:39:34

标签: ruby-on-rails coffeescript bootstrap-modal

嗨所以按照这个使用coffeescript的rails教程,这个函数的一部分是假设找到bootstrap div模态,然后在其中找到“textarea”以立即自动聚焦它。

ready = ->
    $(".media").on "click", -> 
        document.location = $(this).data("target")
        return false

    $(".modal").on "shown.bs.modal", ->
        $(this).find("textarea").focus()

$(document).ready(ready)
$(document).on "page:load", ready

到目前为止.media函数点击工作正常。但是,使用shown.bs.modal的另一个函数不起作用...... 我尝试使用Console.log或提醒它,但似乎$(“。modal”)。on“shown.bs.modal”,不起作用,我不知道为什么。

这是我的HTML

<div class="modal fade" tabindex="-1" role="dialog" id='new-question-modal'>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">      <!--body of modal-->
        <!--Form body
        <form action="/questions" method="POST">-->

      <%=form_for :question,url: '/questions', html: {class: 'form-group'} do %>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email"  name="question[email]" class="form-control" value = "<%= current_user_email%>" id="exampleInputEmail1" placeholder="Email">
        </div>

        <div class="form-group">
          <label for="inputQuestion" class="control-label">Question:</label>
          <textarea class="form-control"  name="question[body]" id="inputQuestion" placeholder="What would you like to know" required=""></textarea>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      <%end%>
           <!--body of modal</form>-->
<!--Form body-->
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

据我所知,它假设识别模态组,而模态淡化就是其中之一?

下面是一个网页示例,我点击绿色按钮弹出一个表单,这是我从bootstrap中获取的模式。

webpage and modal form

1 个答案:

答案 0 :(得分:0)

尝试:    $(“。modal”)。on“fade.in”, - &gt;      $( '输入#exampleInputEmail1')聚焦();