70

ブートストラップをいじり始めたばかりで、それは素晴らしいことです。

私はこれを理解しようとしています。モーダルウィンドウ内にフィードバック用のテキストエリアがあります。それは素晴らしい働きをします。ただし、ボタンをクリックしてモーダルをアクティブ化するときに、テキストエリアにフォーカスを移したいと思います。そして、私はそれを機能させることができないようです。

ここにフィドルがあります：http：//jsfiddle.net/denislexic/5JN9A/4/

コードは次のとおりです。

<a class="btn testBtn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <textarea id="textareaID"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

これがJSです

$('.testBtn').on('click',function(){
    $('#textareaID').focus();
});​

再開する には「モーダルの起動」をクリックすると、モーダルが表示され、テキストエリアにフォーカスが移動します。

助けてくれてありがとう。

4

13 に答える 13

208

ボタンをクリックしてもモーダルがまだロードされていないため、機能しません。フォーカスをイベントにフックする必要があります。ブートストラップのモーダルページに移動すると、イベントが表示shownされis fired when the modal has been made visible to the user (will wait for css transitions to complete)ます。そしてそれがまさに私たちが望んでいることです。

これを試して：

$('#myModal').on('shown', function () {
    $('#textareaID').focus();
})
​

更新されたフィドルは次のとおりです：http：//jsfiddle.net/5JN9A/5/

アップデート：

@MrDBAが指摘しているように、Bootstrap 3では、イベント名がに変更されていshown.bs.modalます。したがって、Bootstrap 3の場合は、次のように使用します。

$('#myModal').on('shown.bs.modal', function () {
    $('#textareaID').focus();
})

Bootstrap 3の新しいフィドル：http：//jsfiddle.net/WV5e7/

于 2012-07-24T16:07:27.303 に答える
21

これの宣言的なバージョンが欲しかったので、次のようにしました。

$(document).ready(function() {
    $(".modal").on('shown.bs.modal', function () {
        $("[data-modalfocus]", this).focus();
    });
});

次のように、フィールドに data-modalfocus プロパティを追加するだけです。

<input type="text" data-modalfocus />

モーダルがポップアップすると、フィールドがフォーカスされます。

于 2015-03-10T21:34:47.300 に答える
11

Bootstrap3

$(window.document).on('shown.bs.modal', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});

ブートストラップ 2

$(window.document).on('shown', '.modal', function() {
    window.setTimeout(function() {
        $('[autofocus]', this).focus();
    }.bind(this), 100);
});
于 2015-03-31T13:03:07.293 に答える
4

autofocushtml 要素を使用してオートフォーカスを設定できます。

<textarea id="textareaID" autofocus="" ></textarea>

ここでフィドル (クリック)

于 2013-12-26T22:42:00.457 に答える
1

もう少し一般的なものが欲しかった

    $(window.document).on('shown.bs.modal', '.modal', function () {
        var timer = window.setTimeout(function () {
            $('.firstInput', this).focus();
            typeof timer !== 'undefined' && window.clearTimeout(timer);
        }.bind(this), 100);
    });

これで、CSS クラスの firstInput に必要なコントロールを与えます。フォーカスを設定するのにわずかな遅れがあり、特定の才能を与えます.

于 2016-02-19T21:46:22.980 に答える
1

モーダルに「フェード」プロパティがある場合:

これは機能しますが、タイムアウトの期間と、必要に応じて明らかに ID を調整する必要がある場合があります。

$("#ID-of-modal").on('show', function(event){
                window.setTimeout(function(){
                  $(event.currentTarget).find('input#ID-of-input').first().focus()
                }, 0175);
              });
于 2013-08-23T18:09:35.977 に答える
0

イベントをモーダル画面に直接添付してもうまくいきませんでした。代わりにこのコードを使用しています：

$('body').on('shown.bs.modal', '.modal', function () {
  $('[id$=myField]').focus();
})

このコードでは、フォーカスを設定したいコントロールの ID の myField を変更するだけで済みます。また、複数のモーダル画面のフォーカスを定義することもできます。次のようなものがあります。

      $('body').on('shown.bs.modal', '.modal', function () {
        $('[id$=YesCancel]').focus();
        $('[id$=YesInverted]').focus();
        $('[id$=cancelAddCustomer]').focus();
        $('[id$=closeHistoryModal]').focus();
      });

ソースhttp://xcellerant.net/2014/08/06/set-focus-on-a-field-when-showing-a-bootstrap-3-modal/

于 2015-07-23T13:57:16.583 に答える
-1 
<a href="" id="btnmoverCategoriaRaiz">Mover para a raiz...</a> 
      <script>
         $(function(){
            $("#btnmoverCategoriaRaiz").click(function(){
                $("#novoPlaylist").modal();
                return false;
            });
         });

       </script>    
 <div id="novoPlaylist" class= "modal  hide">
          <div class="modal-header">
            <h3>Novo Playlist</h3>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <?echo $form->input("Playlist.nome", array("label"=>"Nome:")) ?>
            </form>
          </div>
              <div class="modal-footer">
                 <a href="javascript:;" class="btn" data-dismiss="modal">Cancelar</a>
                 <a href="javascript:;" class="btn btn-primary" id="SalvarNomePlaylist" data-loading-text="Aplicando..."> Savar</a>
              </div>
      </div>
于 2013-10-11T12:05:46.980 に答える