Cegah dialog jQuery UI dari pengaturan fokus ke kotak teks pertama

Saya telah menyiapkan dialog modal UI jQuery untuk ditampilkan ketika pengguna mengklik tautan. Ada dua kotak teks (saya hanya menunjukkan kode untuk 1 untuk singkatnya) dalam tag div dialog itu dan diubah menjadi kotak teks DatePicker jQuery UI yang bereaksi pada fokus.

Masalahnya adalah dialog UI jQuery ('terbuka') entah bagaimana memicu kotak teks pertama untuk memiliki fokus, yang kemudian memicu kalender datepicker untuk segera dibuka.

Jadi saya mencari cara untuk mencegah fokus terjadi secara otomatis.

<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>

jQuery UI 1.10.0 Changelog mendaftar tiket 4731 sebagai diperbaiki.

Sepertinya fokusSelektor tidak diimplementasikan, tetapi pencarian cascading untuk berbagai elemen digunakan sebagai gantinya. Dari tiket:

Perluas autofokus, mulai dengan [fokus otomatis], lalu: konten tabbable, lalu buttonpane, lalu tutup tombol, lalu dialog

Jadi, tandai elemen dengan autofocusatribut dan itu adalah elemen yang harus mendapatkan fokus:

<input autofocus>

Dalam dokumentasi , logika fokus dijelaskan (tepat di bawah daftar isi, dengan judul 'Fokus'):

Setelah membuka dialog, fokus secara otomatis dipindahkan ke item pertama yang cocok dengan yang berikut:

1. Elemen pertama dalam dialog dengan autofocusatribut
2. :tabbableElemen pertama dalam konten dialog
3. :tabbableElemen pertama di dalam tombol button dialog
4. Tombol tutup dialog
5. Dialog itu sendiri

Tambahkan rentang tersembunyi di atasnya, gunakan ui-helper-hidden-dapat diakses untuk membuatnya tersembunyi oleh penentuan posisi absolut. Saya tahu Anda memiliki kelas itu karena Anda menggunakan dialog dari jquery-ui dan itu di jquery-ui.

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

Di jQuery UI> = 1.10.2, Anda dapat mengganti _focusTabbablemetode prototipe dengan fungsi plasebo:

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

Biola

Ini akan mempengaruhi semua dialogyang ada di halaman tanpa harus mengedit masing-masing secara manual.

Fungsi asli tidak melakukan apa pun selain mengatur fokus ke elemen pertama dengan autofocusatribut / tabbableelemen / atau kembali ke dialog itu sendiri. Karena penggunaannya hanya mengatur fokus pada suatu elemen, seharusnya tidak ada masalah menggantinya dengan a noop.

Mulai dari jQuery UI 1.10.0, Anda dapat memilih elemen input mana yang menjadi fokus dengan menggunakan autofocus atribut HTML5 .

Yang harus Anda lakukan adalah membuat elemen dummy sebagai input pertama Anda di kotak dialog. Ini akan menyerap fokus untuk Anda.

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

Ini telah diuji di Chrome, Firefox dan Internet Explorer (semua versi terbaru) pada 7 Februari 2013.

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

Saya menemukan kode berikut fungsi dialog jQuery UI untuk terbuka.

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

Anda bisa mengatasi perilaku jQuery atau mengubah perilaku.

tabindex -1 berfungsi sebagai solusi.

Baru tahu ini sambil bermain-main.

Saya menemukan dengan solusi ini untuk menghapus fokus, menyebabkan ESCkunci berhenti bekerja (yaitu menutup dialog) ketika pertama kali masuk ke Dialog.

Jika dialog terbuka dan Anda segera menekan ESC, itu tidak akan menutup dialog (jika Anda telah mengaktifkannya), karena fokusnya adalah pada beberapa bidang tersembunyi atau sesuatu, dan itu tidak mendapatkan peristiwa penekanan tombol.

Cara saya memperbaikinya adalah menambahkan ini ke acara terbuka untuk menghapus fokus dari bidang pertama sebagai gantinya:

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

Ini menetapkan fokus ke kotak dialog, yang tidak terlihat, dan kemudian ESCkuncinya bekerja.

Atur tabindex dari input menjadi -1, dan kemudian atur dialog.open untuk mengembalikan tabindex jika Anda membutuhkannya nanti:

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

Solusi saya:

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

Saya punya konten yang lebih panjang dari dialog. Saat terbuka, dialog akan berubah menjadi yang pertama: tabbable yang berada di bagian bawah. Inilah perbaikan saya.

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

Solusi sederhana:

Cukup buat elemen tak terlihat dengan tabindex = 1 ... Ini tidak akan memfokuskan datepicker ...

misalnya.:

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

Inilah solusi yang saya terapkan setelah membaca tiket jQuery UI # 4731 , awalnya diposting oleh slolife sebagai jawaban atas jawaban lain (Tiket itu juga dibuat olehnya.)

Pertama, dalam metode apa pun yang Anda gunakan untuk menerapkan pelengkapan otomatis ke halaman, tambahkan baris kode berikut:

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

Itu menonaktifkan perilaku "fokus otomatis" jQuery. Untuk memastikan bahwa situs Anda terus dapat diakses secara luas, bungkus metode pembuatan dialog Anda sehingga kode tambahan dapat ditambahkan, dan tambahkan panggilan untuk memfokuskan elemen input pertama:

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();

}

Untuk lebih lanjut mengatasi aksesibilitas ketika opsi pelengkapan otomatis dipilih melalui keyboard, kami menimpa panggilan balik "pilih" otomatis jQuery UI dan menambahkan beberapa kode tambahan untuk memastikan textElement tidak kehilangan fokus di IE 8 setelah membuat pilihan.

Berikut adalah kode yang kami gunakan untuk menerapkan pelengkapan otomatis ke elemen:

$.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;
}

Anda dapat menyediakan opsi ini, untuk memfokuskan tombol tutup saja.

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

Ini bisa menjadi perilaku browser bukan masalah plugin jQuery. Sudahkah Anda mencoba menghapus fokus secara terprogram setelah Anda membuka sembulan.

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

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

    return false;
});

Belum diuji tetapi harus bekerja ok.

Saya memiliki masalah yang sama dan menyelesaikannya dengan memasukkan input kosong sebelum datepicker, yang mencuri fokus setiap kali dialog dibuka. Input ini disembunyikan pada setiap pembukaan dialog dan ditampilkan lagi pada penutupan.

Yah, itu keren bahwa tidak ada yang menemukan solusi untuk saat ini, tetapi sepertinya saya punya sesuatu untuk Anda. Kabar buruknya adalah dialog ini tetap fokus dalam hal apa pun meskipun tidak ada input dan tautan di dalamnya. Saya menggunakan dialog sebagai tooltip dan pasti perlu fokus tetap pada elemen asli. Ini solusinya:

gunakan opsi [buka otomatis: salah]

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

Sementara dialog tidak terlihat, fokus tidak diatur di mana pun dan tetap di tempat asli. Ini berfungsi untuk tooltips hanya dengan teks biasa, tetapi tidak diuji untuk dialog yang lebih fungsional di mana mungkin penting untuk memiliki dialog yang terlihat pada saat pembukaan. Mungkin akan bekerja dengan baik dalam hal apa pun.

Saya mengerti bahwa posting asli hanya untuk menghindari fokus pada elemen pertama, tetapi Anda dapat dengan mudah memutuskan di mana fokus seharusnya setelah dialog dibuka (setelah kode saya).

Diuji dalam IE, FF dan Chrome.

Semoga ini bisa membantu seseorang.

Menurut saya solusi ini sangat bagus:

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

Ditemukan di sini: tidak dapat menghapus autofocus-in-ui-dialog

Saya punya masalah serupa. Saya membuka dialog kesalahan ketika validasi gagal dan itu mengambil fokus, seperti yang ditunjukkan Flugan dalam jawabannya . Masalahnya adalah bahwa bahkan jika tidak ada elemen di dalam dialog itu tabbable, dialog itu sendiri masih fokus. Berikut adalah kode asli yang tidak diubah dari 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();

Komentar adalah milik mereka!

Ini sangat buruk bagi saya karena beberapa alasan. Yang paling menyebalkan adalah reaksi pertama pengguna adalah menekan backspace untuk menghapus karakter terakhir, tetapi sebaliknya ia diminta untuk meninggalkan halaman, karena backspace dipukul di luar kontrol input.

Saya menemukan bahwa solusi berikut ini bekerja cukup baik untuk saya:

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

Saya mencari-cari masalah yang berbeda tetapi penyebab yang sama. Masalahnya adalah bahwa dialog mengatur fokus ke yang pertama kali <a href="">.</a>ditemukan. Jadi, jika Anda memiliki banyak teks dalam dialog Anda dan bilah gulir muncul Anda bisa memiliki situasi di mana bilah gulir akan digulir ke bawah. Saya percaya ini juga memperbaiki pertanyaan orang pertama. Meskipun yang lain juga melakukannya.

Sederhana mudah dimengerti. <a id="someid" href="#">.</a> sebagai baris pertama di div dialog Anda.

CONTOH:

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

Di mana dialog Anda dimulai

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

Di atas tidak akan fokus dan bilah gulir akan tetap di bagian atas tempatnya. The <a>mendapat fokus tapi kemudian disembunyikan. Jadi efek keseluruhan adalah efek yang diinginkan.

Saya tahu ini adalah utas lama tetapi untuk sebagai UI UI tidak ada perbaikan untuk ini. Ini tidak membutuhkan blur atau fokus untuk bekerja. Tidak yakin apakah itu yang paling elegan. Tapi itu masuk akal dan mudah dijelaskan kepada siapa pun.

Jika Anda hanya memiliki satu bidang dalam bentuk dialog Jquery dan itu adalah bidang yang membutuhkan Datepicker, atau Anda dapat mengatur fokus pada tombol Tutup (silang) di bilah judul dialog:

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

Sebut dialog SETELAH ini diinisialisasi, misalnya:

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

Karena tombol tutup diberikan setelah .dialog()dipanggil.

Jika Anda menggunakan tombol dialog, cukup atur autofocusatribut di salah satu tombol:

$('#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>

Saya mendapat masalah yang sama.

Solusi yang saya lakukan adalah menambahkan kotak teks dummy di bagian atas wadah dialog.

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

Seperti disebutkan, ini adalah bug yang dikenal dengan jQuery UI dan harus segera diperbaiki. Sampai saat itu ...

Ini opsi lain, jadi Anda tidak perlu mengacaukan tabindex:

Nonaktifkan datepicker sementara hingga kotak dialog terbuka:

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

Bekerja untukku.

Duplikat pertanyaan: Bagaimana mengaburkan input formulir pertama pada pembukaan dialog

Untuk memperluas beberapa jawaban sebelumnya (dan mengabaikan aspek pendukung data tambahan), jika Anda ingin mencegah focus()acara memfokuskan bidang input pertama saat dialog Anda terbuka, coba ini:

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

Saya memiliki masalah yang sama dan menyelesaikannya dengan berfokus pada dialog setelah dibuka:

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?)

Tetapi dalam kasus saya elemen pertama adalah jangkar, jadi saya tidak tahu apakah dalam kasus Anda itu akan membiarkan datepicker terbuka.

EDIT: hanya berfungsi di IE

temukan di jquery.ui.js

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

dan ganti dengan

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

jQuery 1.9 dirilis dan tampaknya tidak ada perbaikan. Mencoba mencegah fokus kotak teks pertama oleh beberapa metode yang disarankan tidak berfungsi di 1.9. Saya pikir karena metode yang mencoba mengaburkan fokus atau memindahkan fokus terjadi SETELAH kotak teks dalam dialog sudah mendapatkan fokus dan melakukan pekerjaan kotornya.

Saya tidak dapat melihat apa pun di dokumentasi API yang membuat saya berpikir bahwa ada sesuatu yang berubah dalam hal fungsi yang diharapkan. Mati untuk menambahkan tombol pembuka ...

Saya punya masalah serupa. Di halaman saya, input pertama adalah kotak teks dengan kalender jQuery UI. Elemen kedua adalah tombol. Karena tanggal sudah memiliki nilai, saya menetapkan tombol fokus, tetapi pertama-tama tambahkan pemicu untuk blur pada kotak teks. Ini mengatasi masalah di semua browser dan mungkin di semua versi jQuery. Diuji dalam versi 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();

});   

Ini sangat penting untuk smartphone dan tablet karena keyboard muncul ketika input memiliki fokus. Inilah yang telah saya lakukan, tambahkan input ini di awal div:

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

Tidak berfungsi dengan ukuran 0px. Saya kira itu lebih baik dengan gambar transparan nyata, baik .pngatau.gif saya belum mencoba.

Sejauh ini berfungsi dengan baik di iPad.

Anda dapat menambahkan ini:

...

dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){                  // There is new line
  $("#txtStartDate").focus();
  }
});

...

sebagai input pertama: <input type="text" style="position:absolute;top:-200px" />