JQuery UI iletişim kutusunun odağı ilk metin kutusuna ayarlamasını önleme

Bir kullanıcı bir bağlantıyı tıklattığında görüntülemek için bir jQuery UI kalıcı iletişim kutusu ayarladım. Bu iletişim div etiketinde iki metin kutusu vardır (yalnızca kısalık için 1 kodunu gösteririm) ve odaklanmaya tepki veren bir jQuery UI DatePicker metin kutusu olarak değiştirildi.

Sorun, jQuery UI iletişim kutusunun ('open') bir şekilde ilk metin kutusunu odaklanmaya, sonra da tarih seçici takvimin hemen açılmasını tetiklemesidir.

Bu yüzden odaklamanın otomatik olarak gerçekleşmesini önlemenin bir yolunu arıyorum.

<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 4731 numaralı bileti sabit olarak listeler .

FocusSelector uygulanmadı, ancak bunun yerine çeşitli öğeler için basamaklı bir arama kullanıldı. Biletten:

Otomatik netlemeyi uzatın, [otomatik netleme] ile başlayın, ardından: sekmeli içerik, ardından düğme paneli, ardından kapat düğmesi, ardından iletişim kutusu

Bu nedenle, bir öğeyi autofocusöznitelikle işaretleyin ve bu, odağı alması gereken öğedir:

<input autofocus>

Gelen belgeler , odak mantık (başlık 'Odak' başlığı altında, sadece içindekiler altında) açıklanmıştır:

Bir iletişim kutusu açıldığında, odak otomatik olarak aşağıdakilerle eşleşen ilk öğeye taşınır:

1. İletişim kutusundaki autofocusözniteliğe sahip ilk öğe
2. :tabbableİletişim kutusunun içeriğindeki ilk öğe
3. :tabbableİletişim kutusunun düğme panelindeki ilk öğe
4. İletişim kutusunun kapat düğmesi
5. Diyalogun kendisi

Üstüne gizli bir açıklık ekleyin, mutlak konumlandırma ile gizlemek için ui-helper-hidden-erişilebilir kullanın. Jquery-ui iletişim kutusunu kullandığınız ve jquery-ui içinde olduğu için bu sınıf var biliyorum.

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

JQuery UI> = 1.10.2'de, _focusTabbableprototip yöntemini bir plasebo işleviyle değiştirebilirsiniz:

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

Vaktini boşa harcamak

Bu, dialogher birini manuel olarak düzenlemeye gerek kalmadan sayfadaki tüm sayfaları etkiler .

Orijinal işlev, odağı autofocusöznitelik / tabbableöğe / veya iletişim kutusunun kendisine geri düşen ilk öğeye ayarlamaktan başka bir şey yapmaz . Kullanımı sadece bir öğeye odaklanmak olduğundan, onu a ile değiştirmede sorun olmamalıdır noop.

JQuery UI 1.10.0'dan başlayarak , HTML5 özniteliği otomatik odaklamasını kullanarak odaklanacak giriş öğesini seçebilirsiniz .

Tek yapmanız gereken iletişim kutusundaki ilk girişiniz olarak bir kukla öğe oluşturmaktır. Odağı sizin için emecektir.

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

Bu, 7 Şubat 2013 tarihinde Chrome, Firefox ve Internet Explorer'da (en son sürümlerin tümü) test edilmiştir.

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

Aşağıdaki kodu açmak için jQuery UI iletişim işlevini buldum.

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

JQuery davranışını geçici olarak çözebilir veya davranışı değiştirebilirsiniz.

tabindex -1 geçici bir çözüm olarak çalışır.

Sadece oynarken bu çözdü.

Odağı kaldırmak için bu çözümlerle buldum, ESCilk kez Dialog'a girerken anahtarın çalışmamasına (yani iletişim kutusunu kapatmasına) neden oldum .

İletişim kutusu açılırsa ve hemen tuşuna basarsanız ESC, odak bazı gizli alanlara veya başka bir şeye odaklandığından ve tuşa basma olayları alamadığı için iletişim kutusunu kapatmaz (etkinleştirdiyseniz).

Bunu düzeltmenin yolu, odağı ilk alandan kaldırmak için bunu open olayına eklemekti:

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

Bu, odağı görünür olmayan iletişim kutusuna ayarlar ve ardından ESCanahtar çalışır.

Girişin tabindex'ini -1 olarak ayarlayın ve daha sonra ihtiyacınız varsa tabindex'i geri yüklemek için dialog.open öğesini ayarlayın:

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

Geçici çözümüm:

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

İletişim kutusundan daha uzun içerik vardı. Açıkken, iletişim kutusu ilkde olan sekmeye gider: altta olan sekme. İşte benim düzeltmem.

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

Basit geçici çözüm:

Tabindex = 1 ile görünmez bir öğe oluşturun ... Bu, tarih seçiciyi odaklamaz ...

Örneğin.:

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

İşte 4731 numaralı jQuery UI biletini okuduktan sonra uyguladığım çözüm , aslında slolife tarafından başka bir cevaba yanıt olarak gönderildi. (Bilet de onun tarafından oluşturuldu.)

İlk olarak, sayfaya otomatik tamamlama uygulamak için hangi yöntemi kullanırsanız kullanın, aşağıdaki kod satırını ekleyin:

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

Bu, jQuery'nin "otomatik odaklama" davranışını devre dışı bırakır. Sitenize geniş erişimin devam etmesini sağlamak için, iletişim kodu oluşturma yöntemlerinizi ek kod eklenecek şekilde sarın ve ilk giriş öğesini odaklamak için bir çağrı ekleyin:

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

}

Otomatik tamamlama seçenekleri klavye ile seçildiğinde erişilebilirliği daha fazla ele almak için jQuery kullanıcı arayüzünün "select" otomatik tamamlama geri aramasını geçersiz kılar ve bir seçim yaptıktan sonra textElement öğesinin IE 8'de odağı kaybetmediğinden emin olmak için bazı ek kodlar ekleriz.

Öğelere otomatik tamamlamaları uygulamak için kullandığımız kod:

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

Bunun yerine kapat düğmesine odaklanmak için bu seçeneği kullanabilirsiniz.

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

Bu bir tarayıcı davranışı değil jQuery eklentisi sorunu olabilir. Açılır pencereyi açtıktan sonra odağı programlı olarak kaldırmayı denediniz mi?

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

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

    return false;
});

Bunu test etmedim ama iyi çalışmalı.

Ben aynı sorunu ve tarih seçici önce boş bir giriş ekleyerek çözüldü, her iletişim açıldığında odak çalmak. Bu giriş iletişim kutusunun her açılışında gizlidir ve kapanışta tekrar gösterilir.

Şimdilik kimsenin çözümü bulamaması güzel, ama senin için bir şeyim var gibi görünüyor. Kötü haber, iletişim kutusu içeride hiçbir giriş ve bağlantı olmasa bile her durumda odaklanır. İletişim kutusunu bir araç ipucu olarak kullanıyorum ve kesinlikle orijinal öğede odakta kalmaya ihtiyacım var. İşte benim çözümüm:

seçeneği kullan [autoOpen: yanlış]

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

İletişim kutusu görünmez olsa da, odak hiçbir yere ayarlanmaz ve orijinal yerinde kalır. Yalnızca düz bir metin içeren araç ipuçları için çalışır, ancak iletişim kutusunun açılış anında görünmesinin önemli olabileceği daha işlevsel iletişim kutuları için test edilmez. Muhtemelen her durumda iyi çalışır.

Orijinal gönderinin sadece ilk öğeye odaklanmamak için olduğunu anlıyorum, ancak iletişim kutusunun açılmasından sonra (kodumdan sonra) odaklamanın nerede olması gerektiğine kolayca karar verebilirsiniz.

IE, FF ve Chrome'da test edildi.

Umarım bu birisine yardım eder.

Bence bu çözüm çok güzel:

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

Burada bulundu: ui iletişim kutusunda otomatik netleme kaldırılamıyor

Benzer bir sorunum var. Doğrulama başarısız olduğunda bir hata iletişim kutusunu açmak ve sadece onun içinde Flugan gösterileri bunu gibi odak yakalar cevap . Sorun, iletişim kutusunun içinde hiçbir öğe sekilebilir olmasa bile, iletişim kutusunun kendisinin hala odaklanmış olmasıdır. Jquery-ui-1.8.23 \ js \ jquery.ui.dialog.js dosyasındaki orijinal, küçük kod:

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

Yorum onların!

Bu birkaç nedenden dolayı benim için gerçekten kötü. En sinir bozucu şey, kullanıcının ilk tepkisinin son karakteri silmek için geri tuşuna basmasıdır, ancak bunun yerine geri bırakma bir giriş kontrolünün dışına vurulduğu için sayfadan ayrılması istenir.

Aşağıdaki geçici çözümün benim için oldukça iyi çalıştığını gördüm:

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

Farklı bir konu arıyordum ama aynı sebep. Sorun, iletişim kutusunun odağı ilk <a href="">.</a>bulduğu şekilde ayarlamasıdır. Dolayısıyla, iletişim kutunuzda çok fazla metin varsa ve kaydırma çubukları görünürse, kaydırma çubuğunun aşağı doğru kaydırılacağı durumunuz olabilir. Bunun birinci şahıslar sorusunu da düzelttiğine inanıyorum. Diğerleri de öyle olsa da.

Basit anlamak kolay düzeltme. <a id="someid" href="#">.</a> div div'inizdeki ilk satır olarak.

MİSAL:

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

İletişiminizin nerede başlatıldığı

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

Yukarıdakilere odaklanmış hiçbir şey olmayacak ve kaydırma çubukları ait olduğu en üstte kalacaktır. <a>Odağı alır ama sonra gizlenir. Böylece genel etki istenen etkidir.

Bu eski bir iş parçacığı biliyorum ama UI dokümanlar gelince bu bir düzeltme yoktur. Bu, çalışmak için bulanıklık veya odaklama gerektirmez. En zarif olup olmadığından emin değilim. Ancak herkese açıklanması mantıklı ve kolaydır.

Jquery iletişim kutusunda yalnızca bir alanınız varsa ve bu da Datepicker'a ihtiyaç duyulan alansa, alternatif olarak, iletişim kutusunun başlık çubuğunda iletişim kutusunu Kapat (çapraz) düğmesine odaklayabilirsiniz :

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

Bu İLETİŞİM iletişim kutusu başlatıldıktan sonra çağırın, örneğin:

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

Çünkü kapat düğmesi .dialog()çağrıldıktan sonra oluşturulur .

İletişim düğmeleri kullanıyorsanız autofocus, düğmelerden birinde özelliği ayarlamanız yeterlidir:

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

Ben de aynı problemi yaşadım.

Yaptığım geçici çözüm, iletişim kutusunun üst kısmına kukla metin kutusu eklemektir.

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

Belirtildiği gibi, bu jQuery UI ile bilinen bir hatadır ve nispeten yakında düzeltilmesi gerekir. O zamana kadar...

İşte başka bir seçenek, bu yüzden tabindex ile uğraşmanıza gerek yok:

İletişim kutusu açılana kadar tarih seçiciyi geçici olarak devre dışı bırakın:

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

Benim için çalışıyor.

Yinelenen soru: İletişim kutusu açılışında ilk form girişini bulanıklaştırma

Önceki yanıtlardan bazılarını genişletmek (ve yardımcı tarih seçici yönünü yok saymak) için, focus()iletişim kutusunuz açıldığında olayın ilk giriş alanına odaklanmasını önlemek istiyorsanız , şunu deneyin:

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

Ben benzer bir sorun vardı ve açtıktan sonra diyalog odaklanarak çözdü:

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

Ama benim durumumda ilk eleman bir çapa, bu yüzden senin durumunda tarih seçici açık bırakacak bilmiyorum.

EDIT: sadece IE üzerinde çalışır

jquery.ui.js'de bul

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

ve ile değiştir

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

jQuery 1.9 yayınlandı ve bir düzeltme gibi görünmüyor. Önerilen yöntemlerden bazıları tarafından ilk metin kutusunun odaklanmasını engelleme girişimi 1.9'da çalışmıyor. Ben beccause yöntemleri odak bulanıklaştırma veya odak taşımak girişimi iletişim kutusundaki metin kutusu zaten odak kazanmış ve kirli işi yaptı SONRA.

API belgelerinde, beklenen işlevsellik açısından herhangi bir şeyin değiştiğini düşündüren hiçbir şey göremiyorum. Açıcı düğmesi eklemek için kapalı ...

Benzer bir sorun yaşadım. Sayfamda ilk girdi jQuery UI takvimine sahip metin kutusu. İkinci eleman düğmedir. Tarih zaten bir değere sahip olduğundan, odağı düğmeye ayarladım, ancak önce metin kutusunda bulanıklık için tetikleyici ekledim. Bu, tüm tarayıcılarda ve muhtemelen jQuery'nin tüm sürümlerinde sorunu çözer. 1.8.2 sürümünde test edilmiştir.

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

});   

Bu, akıllı telefonlar ve tabletler için gerçekten önemlidir, çünkü bir giriş odaklandığında klavye ortaya çıkar. Yaptığım şey bu, div'in başına bu girişi ekleyin:

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

Boyut ile çalışmaz 0px. Sanırım gerçek şeffaf bir görüntüyle daha da iyi, ya .pngda.gif ama denemedim.

İPad'de şimdiye kadar iyi çalışıyor.

Bunu ekleyebilirsiniz:

...

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

...

ilk girdi olarak: <input type="text" style="position:absolute;top:-200px" />