无法自动聚焦于引导模态的字段 [英] Unable to make auto focus on fields for bootstrap modal

问题描述

所以按照本使用coffeescript的Rails教程进行操作之后，该功能的一部分应该是找到bootstrap div模态，然后在其中找到"textarea"以立即对其自动聚焦.

Hi so following this rails tutorial using coffeescript , a part of this function is suppose to find the bootstrap div modal, then find the "textarea" within it to auto focus it immediately .

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函数的点击到目前为止一直有效.但是，另一个使用了showd.bs.modal的功能无法正常工作... 我尝试了Console.log或也向它发出警报，但是似乎在"shown.bs.modal"上的$(.modal").不能正常工作，我不确定为什么.

The .media function click is working so far. However, another function which uses the shown.bs.modal is not working... I tried to Console.log or alert it as well but it seems that $(".modal").on "shown.bs.modal", is not working and i'm not sure why.

这是我的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 -->

据我所知，应该确定模态组，而模态淡入是其中之一?

From what i can tell it's suppose to identify the modal groups , and modal fade is one of them?

下面是该网页的示例，我单击绿色按钮，然后弹出一个表单，该表单是我从引导程序中获取的模式.

Below here is a sample of the webpage , where i click the green button and a form pops out which is the modal i took from bootstrap.

推荐答案

尝试: $(.modal').on" fade.in，-> $('input#exampleInputEmail1').focus();

Try: $(".modal').on "fade.in", -> $('input#exampleInputEmail1').focus();

这篇关于无法自动聚焦于引导模态的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！