web-dev-qa-db-ja.com

jQuery UIダイアログがフォーカスを最初のテキストボックスに設定しないようにします

ユーザーがリンクをクリックしたときに表示するjQuery UIモーダルダイアログをセットアップしました。そのダイアログdivタグには2つのテキストボックス（簡潔にするために1のコードのみを表示）があり、フォーカスに反応するjQuery UI DatePickerテキストボックスに変更されます。

問題は、jQuery UI dialog（ 'open'）が何らかの方法でフォーカスを持つ最初のテキストボックスをトリガーし、それがdatepickerカレンダーをトリガーしてすぐに開くことです。

そこで、フォーカスが自動的に発生しないようにする方法を探しています。

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>
javascriptjqueryjquery-ui
152
slolife

jQuery UI 1.10.0変更ログ リスト チケット4731 修正中.

FocusSelectorは実装されていないようですが、さまざまな要素のカスケード検索が代わりに使用されました。チケットから：

[autofocus]で始まり、次に：tabbable content、buttonpane、close button、dialogの順にオートフォーカスを拡張します

そのため、要素をautofocus属性でマークすると、それがフォーカスを取得する要素になります。

<input autofocus>

ドキュメント では、フォーカスロジックが説明されています（目次のすぐ下、タイトル 'Focus'の下）：

ダイアログを開くと、フォーカスは次と一致する最初のアイテムに自動的に移動します。

  1. autofocus属性を持つダイアログ内の最初の要素
  2. ダイアログのコンテンツ内の最初の:tabbable要素
  3. ダイアログのボタンペイン内の最初の:tabbable要素
  4. ダイアログの閉じるボタン
  5. ダイアログ自体
76
slolife

その上に非表示のスパンを追加し、ui-helper-hidden-accessibleを使用して、絶対位置によって非表示にします。 jquery-uiのダイアログを使用しており、jquery-uiにあるため、このクラスがあることを知っています。

<span class="ui-helper-hidden-accessible"><input type="text"/></span>
74
Patrick Lee Scott

JQuery UI> = 1.10.2では、 _focusTabbable プロトタイプメソッドをプラセボ関数に置き換えることができます。

$.ui.dialog.prototype._focusTabbable = $.noop;

Fiddle

これは、ページ内のすべてのdialogに影響し、それぞれを手動で編集する必要はありません。

元の関数は、autofocus属性/ tabbable element /で最初の要素にフォーカスを設定するか、ダイアログ自体にフォールバックするだけです。その使用は要素にフォーカスを設定するだけなので、noopで置換しても問題はありません。

60
Fabrício Matté

次のコードは、開くためのjQuery UIダイアログ関数です。

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

JQueryの動作を回避するか、動作を変更できます。

tabindex -1は回避策として機能します。

28
user53067

JQuery UI 1.10.0以降、HTML5属性を使用して、フォーカスする入力要素を選択できますautofocus。

ダイアログボックスで最初の入力としてダミー要素を作成するだけです。それはあなたのために焦点を吸収します。

<input type="hidden" autofocus="autofocus" />

これは、2013年2月7日にChrome、Firefox、Internet Explorer（すべての最新バージョン）でテストされています。

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

26
silkfire

遊んでいるうちにこれを理解しました。

私はこれらのソリューションでフォーカスを削除することがわかったため、 ESC 最初にダイアログに入るときに作業を停止する（つまり、ダイアログを閉じる）キー。

ダイアログが開き、すぐに押す場合 ESC、ダイアログを閉じません（有効にしている場合）。これは、非表示フィールドまたは何かにフォーカスがあり、キー押下イベントを取得していないためです。

私が修正した方法は、これをopenイベントに追加して、代わりに最初のフィールドからフォーカスを削除することでした：

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

これにより、表示されていないダイアログボックスにフォーカスが設定され、 ESC キーワークス。

13
Rob Donovan

入力のtabindexを-1に設定し、dialog.openを設定して、後で必要な場合にtabindexを復元します。

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});
10
redsquare

私の回避策：

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},
10
Thomas

ダイアログよりも長いコンテンツがありました。開くと、ダイアログは一番下にある最初の：tabbableまでスクロールします。ここに私の修正がありました。

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});
7
thetoolman

簡単な回避策：

Tabindex = 1で不可視の要素を作成するだけです...これはdatepickerに焦点を合わせません...

例えば。：

<a href="" tabindex="1"></a>
...
Here comes the input element
7
Andy

jQuery UIチケット＃4731 を読んだ後に実装したソリューションを次に示します。元々はslolifeが別の回答への応答として投稿したものです。 （チケットも彼によって作成されました。）

最初に、ページにオートコンプリートを適用するために使用する方法にかかわらず、次のコード行を追加します。

$.ui.dialog.prototype._focusTabbable = function(){};

これにより、jQueryの「オートフォーカス」動作が無効になります。サイトが引き続き広くアクセスできるようにするには、ダイアログ作成メソッドをラップして、追加のコードを追加できるようにし、最初の入力要素にフォーカスする呼び出しを追加します。

function openDialog(context) {

    // Open your dialog here

    // Usability for screen readers.  Focus on an element so that screen readers report it.
    $("input:first", $(context)).focus();

}

キーボードでオートコンプリートオプションが選択された場合のアクセシビリティにさらに対処するため、jQuery UIの「選択」オートコンプリートコールバックをオーバーライドし、選択を行った後にIE 8でtextElementがフォーカスを失わないようにいくつかのコードを追加します。

オートコンプリートを要素に適用するために使用するコードは次のとおりです。

$.fn.applyAutocomplete = function () {

    // Prevents jQuery dialog from auto-focusing on the first tabbable element.
    // Make sure to wrap your dialog opens and focus on the first input element
    // for screen readers.
    $.ui.dialog.prototype._focusTabbable = function () { };

    $(".autocomplete", this)
        .each(function (index) {

            var textElement = this;

            var onSelect = $(this).autocomplete("option", "select");
            $(this).autocomplete("option", {
                select: function (event, ui) {
                    // Call the original functionality first
                    onSelect(event, ui);

                    // We replace a lot of content via AJAX in our project.
                    // This ensures proper copying of values if the original element which jQuery UI pointed to
                    // is replaced.
                    var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
                    if ($hiddenValueElement.attr("value") != ui.item.value) {
                        $hiddenValueElement.attr("value", ui.item.value);
                    }

                    // Replace text element value with that indicated by "display" if any
                    if (ui.item.display)
                        textElement.value = ui.item.display;

                    // For usability purposes.  When using the keyboard to select from an autocomplete, this returns focus to the textElement.
                    $(textElement).focus();

                    if (ui.item.display)
                        return false;

                }
            });
        })
        // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
        .on("autocompleteopen", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = true;
        })
        .on("autocompleteclose", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = false;
        });

    return this;
}
3
Alexander Pritchard

代わりに閉じるボタンにフォーカスするために、このオプションを提供できます。

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });
2
Jay Dubal

Jqueryダイアログのフォームにフィールドが1つしかなく、それがDatepickerを必要とする場合、代わりに、ダイアログのフォーカスを設定できます閉じる（クロス）ボタンダイアログのタイトルバー：

$('.ui-dialog-titlebar-close').focus();

このダイアログを初期化した後に呼び出します。例：

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

.dialog()が呼び出された後に閉じるボタンがレンダリングされるため。

1
mik-t

さて、今のところ誰も解決策を見つけられないのはクールですが、私はあなたのために何かを持っているようです。悪いニュースは、入力やリンクが中にない場合でも、ダイアログはどんな場合でもフォーカスをつかむことです。ダイアログをツールチップとして使用しますが、間違いなく元の要素に焦点を合わせる必要があります。私の解決策は次のとおりです。

オプション[autoOpen：false]を使用します

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

ダイアログは表示されませんが、フォーカスはどこにも設定されず、元の場所に留まります。プレーンテキストのみのツールチップで機能しますが、開始時にダイアログを表示することが重要な場合がある、より機能的なダイアログについてはテストされていません。いずれにせよ、おそらくうまく動作します。

元の投稿は最初の要素に焦点を当てることを避けるためだけのものであったことを理解していますが、ダイアログを開いた後（私のコードの後）、焦点をどこに置くべきかを簡単に決定できます。

IE、FF、Chromeでテスト済み。

これが誰かの助けになることを願っています。

1
Roc

ダイアログボタンを使用している場合は、いずれかのボタンにautofocus属性を設定するだけです。

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  This is some text.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>
1
Sam

私は別の問題を探していましたが、同じ原因です。問題は、ダイアログが見つけた最初の<a href="">.</a>にフォーカスを設定することです。したがって、ダイアログに多くのテキストがあり、スクロールバーが表示される場合、スクロールバーが下にスクロールされる状況が発生する可能性があります。これは、最初の人の質問も解決すると思います。他の人も同様です。

シンプルでわかりやすい修正。ダイアログdivの最初の行として<a id="someid" href="#">.</a>。

例：

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

ダイアログが開始される場所

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

上記では何もフォーカスされず、スクロールバーは所属する上部に残ります。 <a>はフォーカスを取得しますが、非表示になります。したがって、全体的な効果は望ましい効果です。

私はこれが古いスレッドであることを知っていますが、UIドキュメントに関してはこれに対する修正はありません。これには、ぼかしやフォーカスが必要ありません。それが最もエレガントかどうかはわかりません。しかし、それは理にかなっており、誰にでも簡単に説明できます。

1
MikeF

同様の問題があります。 Fluganが answer で表示するように、検証が失敗してフォーカスを取得したときにエラーダイアログを開きます。問題は、ダイアログ内にタブ可能な要素がなくても、ダイアログ自体がフォーカスされていることです。 jquery-ui-1.8.23\js\jquery.ui.dialog.jsの元の縮小されていないコードは次のとおりです。

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
  uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
    uiDialog.get()))).eq(0).focus();

コメントは彼らのものです！

これはいくつかの理由で私にとって本当に悪いです。最も厄介なことは、ユーザーの最初の反応はバックスペースを押して最後の文字を削除することですが、代わりにバックスペースが入力コントロール外でヒットするため、ページを離れるように求められます。

私は次の回避策が私にとって非常にうまくいくことを発見しました：

jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
  jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};
1
mark

私の意見では、このソリューションは非常に素晴らしいです：

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

ここにあります： nable-to-remove-autofocus-in-ui-dialog

1
emolah

同じ問題を解決し、日付ピッカーの前に空の入力を挿入することで解決しました。これは、ダイアログが開かれるたびにフォーカスを奪います。この入力は、ダイアログを開くたびに非表示になり、閉じるときに再び表示されます。

1
Manuel Leuenberger

これはjQueryプラグインの問題ではなく、ブラウザーの動作である可能性があります。ポップアップを開いた後、プログラムでフォーカスを削除しようとしましたか。

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

    // you may want to change the selector below
    $('input,textarea,select').blur();

    return false;
});

それをテストしていませんが、うまくいくはずです。

1
RaYell

同じ問題が発生しました。

私がやった回避策は、ダイアログコンテナの上部にダミーのテキストボックスを追加することです。

<input type="text" style="width: 1px; height: 1px; border: 0px;" />
0
TTCG

前述のように、これはjQuery UIの既知のバグであり、比較的すぐに修正する必要があります。それまで...

別のオプションがあるので、tabindexを台無しにする必要はありません。

ダイアログボックスが開くまで、日付ピッカーを一時的に無効にします：

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

私のために働く。

重複した質問： ダイアログの開始時に最初のフォーム入力をぼかす方法

0
BMiner

これは、入力にフォーカスがあるとキーボードが表示されるため、スマートフォンやタブレットにとって非常に重要です。これは私がやったことです、divの最初にこの入力を追加します：

<input type="image" width="1px" height="1px"/>

サイズ0pxでは機能しません。 .pngまたは.gifのいずれかの実際の透明な画像を使用した方がより良いと思いますが、試したことはありません。

これまでのところiPadで正常に動作しています。

0
Ángel Arbeteta

私は同様の問題を抱えており、開いた後のダイアログに焦点を当てて解決しました：

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

しかし、私の場合、最初の要素はアンカーなので、日付ピッカーを開いたままにしておくかどうかはわかりません。

編集：IEでのみ動作します

0
daniloquio

同様の問題がありました。私のページの最初の入力は、jQuery UIカレンダーのあるテキストボックスです。 2番目の要素はボタンです。日付にはすでに値があるため、ボタンにフォーカスを設定しますが、最初にテキストボックスにぼかしのトリガーを追加します。これにより、すべてのブラウザーで、おそらくすべてのバージョンのjQueryで問題が解決します。バージョン1.8.2でテスト済み。

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
    <label style="float: left;">@Translation.StatisticsChooseDate</label>
    @Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time",  @tabindex=1 })
    <input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips"  tabindex="2"/>
}

<script type="text/javascript">
$(document).ready(function () {        
    $("#SelectDate").blur(function () {
        $("#SelectDate").datepicker("hide");
    });
    $("#ButtonStatisticsSearchTrips").focus();

});
0
user1698635

jquery.ui.jsで検索

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus();

および置換

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();
0
user1443069

ダイアログを開いたときにfocus()イベントが最初の入力フィールドにフォーカスしないようにしたい場合は、以前の回答の一部を拡張する（および補助的な日付ピッカーの側面を無視する）ために、これを試してください：

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});
0
nickb

jQuery 1.9がリリースされましたが、修正されていないようです。提案された方法のいくつかによって最初のテキストボックスのフォーカスを妨げようとしても、1.9では機能しません。ダイアログのテキストボックスが既にフォーカスを取得し、その汚れた作業を行った後に、メソッドがフォーカスをぼかす、またはフォーカスを移動しようとするので、私は思う。

APIドキュメントには、期待される機能の点で何かが変わったと思わせるものは何もありません。開始ボタンを追加するにはオフ...

0
pixelda