Evite que el cuadro de diálogo jQuery UI establezca el foco en el primer cuadro de texto

He configurado un cuadro de diálogo modal de jQuery UI para mostrar cuando un usuario hace clic en un enlace. Hay dos cuadros de texto (solo muestro el código para 1 por brevedad) en esa etiqueta div de diálogo y se cambia para que sea un cuadro de texto jQuery UI DatePicker que reacciona en foco.

El problema es que el cuadro de diálogo jQuery UI ('abrir') de alguna manera activa el primer cuadro de texto que tiene foco, lo que luego activa el calendario datepicker para que se abra inmediatamente.

Por lo tanto, estoy buscando una manera de evitar que el enfoque ocurra automáticamente.

<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 enumera el ticket 4731 como fijo.

Parece que focusSelector no se implementó, pero en su lugar se utilizó una búsqueda en cascada de varios elementos. Del boleto:

Extienda el enfoque automático, comenzando con [enfoque automático], luego: contenido tabulable, luego panel de botones, luego botón de cierre, luego diálogo

Entonces, marque un elemento con el autofocusatributo y ese es el elemento que debería enfocarse:

<input autofocus>

En la documentación , se explica la lógica del foco (justo debajo de la tabla de contenido, bajo el título 'Foco'):

Al abrir un cuadro de diálogo, el foco se mueve automáticamente al primer elemento que coincide con lo siguiente:

1. El primer elemento dentro del diálogo con el autofocusatributo
2. El primer :tabbableelemento dentro del contenido del diálogo.
3. El primer :tabbableelemento dentro del panel de botones del diálogo.
4. El botón de cerrar del diálogo
5. El diálogo en sí

Agregue un tramo oculto sobre él, use ui-helper-hidden-accesible para ocultarlo mediante el posicionamiento absoluto. Sé que tienes esa clase porque estás usando el diálogo de jquery-ui y está en jquery-ui.

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

En jQuery UI> = 1.10.2, puede reemplazar el _focusTabbablemétodo prototipo por una función placebo:

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

Violín

Esto afectará a todos los correos dialogelectrónicos de la página sin necesidad de editarlos manualmente.

La función original no hace más que establecer el foco en el primer elemento con autofocusatributo / tabbableelemento / o volver al diálogo en sí. Como su uso es solo enfocarse en un elemento, no debería haber problemas para reemplazarlo por a noop.

A partir de jQuery UI 1.10.0, puede elegir en qué elemento de entrada enfocarse utilizando el enfoque automático de atributo HTML5 .

Todo lo que tiene que hacer es crear un elemento ficticio como su primera entrada en el cuadro de diálogo. Absorberá el foco para ti.

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

Esto se ha probado en Chrome, Firefox e Internet Explorer (todas las versiones más recientes) el 7 de febrero de 2013.

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

Encontré el siguiente código para la función de diálogo jQuery UI para abrir.

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

Puede solucionar el comportamiento de jQuery o cambiar el comportamiento.

tabindex -1 funciona como una solución alternativa.

Solo descubrí esto mientras jugaba.

Encontré que con estas soluciones para eliminar el foco, la ESCclave dejaba de funcionar (es decir, cerrar el cuadro de diálogo) cuando entraba en el cuadro de diálogo.

Si el cuadro de diálogo se abre e inmediatamente presiona ESC, no cerrará el cuadro de diálogo (si lo tiene habilitado), porque el foco está en algún campo oculto o algo así, y no está recibiendo eventos de pulsación de teclas.

La forma en que lo arreglé fue agregar esto al evento abierto para eliminar el foco del primer campo:

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

Esto establece el foco en el cuadro de diálogo, que no está visible, y luego la ESCtecla funciona.

Establezca el índice de tabulación de la entrada en -1 y luego configure dialog.open para restaurar el índice de tabulación si lo necesita más adelante:

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

Mi solución alternativa:

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

Tenía contenido que era más largo que el diálogo. Al abrir, el diálogo se desplazaría al primero: tabulable que estaba en la parte inferior. Aquí estaba mi solución.

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

Solución simple:

Simplemente cree un elemento invisible con tabindex = 1 ... Esto no enfocará el selector de fecha ...

p.ej.:

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

Aquí está la solución que implementé después de leer el ticket # 4731 de jQuery UI , publicado originalmente por slolife como respuesta a otra respuesta. (El boleto también fue creado por él).

Primero, en cualquier método que use para aplicar autocompletar a la página, agregue la siguiente línea de código:

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

Eso deshabilita el comportamiento de "autoenfoque" de jQuery. Para asegurarse de que su sitio continúe siendo ampliamente accesible, ajuste sus métodos de creación de diálogo para que se pueda agregar código adicional y agregue una llamada para enfocar el primer elemento de entrada:

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

}

Para ampliar la accesibilidad cuando las opciones de autocompletar se seleccionan mediante el teclado, anulamos la devolución de llamada de autocompletar "select" de jQuery UI y agregamos un código adicional para asegurar que textElement no pierda el foco en IE 8 después de hacer una selección.

Aquí está el código que usamos para aplicar autocompletar a elementos:

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

Puede proporcionar esta opción para enfocar el botón de cierre en su lugar.

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

Esto puede ser un comportamiento del navegador, no un problema del complemento jQuery. ¿Has intentado eliminar el foco mediante programación después de abrir la ventana emergente?

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

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

    return false;
});

No lo he probado pero debería funcionar bien.

Tuve el mismo problema y lo resolví insertando una entrada vacía antes del selector de fecha, que roba el foco cada vez que se abre el diálogo. Esta entrada se oculta en cada apertura del cuadro de diálogo y se muestra nuevamente al cerrar.

Bueno, es genial que nadie haya encontrado la solución por ahora, pero parece que tengo algo para ti. La mala noticia es que el cuadro de diálogo toma el foco en cualquier caso, incluso si no hay entradas y enlaces dentro. Utilizo el diálogo como información sobre herramientas y definitivamente necesito que el foco permanezca en el elemento original. Aquí está mi solución:

use la opción [autoOpen: false]

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

Si bien el diálogo es invisible, el foco no se establece en ningún lado y permanece en el lugar original. Funciona para la información sobre herramientas con solo un texto sin formato, pero no se ha probado para cuadros de diálogo más funcionales en los que puede ser importante tener un diálogo visible en el momento de la apertura. Probablemente funcionará bien en cualquier caso.

Entiendo que la publicación original fue solo para evitar enfocarse en el primer elemento, pero puede decidir fácilmente dónde debe estar el foco después de abrir el diálogo (después de mi código).

Probado en IE, FF y Chrome.

Esperemos que esto ayude a alguien.

En mi opinión, esta solución es muy buena:

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

Encontrado aquí: incapaz de eliminar el enfoque automático en el diálogo ui

Tengo un problema similar. Abro un cuadro de diálogo de error cuando falla la validación y capta el foco, tal como Flugan lo muestra en su respuesta . El problema es que incluso si ningún elemento dentro del cuadro de diálogo es tabulable, el cuadro de diálogo en sí sigue enfocado. Aquí está el código original nominificado de 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();

¡El comentario es de ellos!

Esto es realmente malo para mí por varias razones. Lo más molesto es que la primera reacción del usuario es presionar el espacio de retroceso para eliminar el último carácter, pero en su lugar se le pide que abandone la página, porque el espacio de retroceso se golpea fuera de un control de entrada.

Descubrí que la siguiente solución me funciona bastante bien:

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

Estaba buscando un problema diferente pero la misma causa. El problema es que el diálogo establece el foco en el primero <a href="">.</a>que encuentra. Entonces, si tiene mucho texto en su cuadro de diálogo y aparecen barras de desplazamiento, podría tener la situación en la que la barra de desplazamiento se desplazará hacia la parte inferior. Creo que esto también soluciona la pregunta de las primeras personas. Aunque los otros también lo hacen.

La solución simple y fácil de entender. <a id="someid" href="#">.</a> como la primera línea en su diálogo div.

EJEMPLO:

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

Donde se inicia su diálogo

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

Lo anterior no tendrá nada enfocado y las barras de desplazamiento permanecerán en la parte superior donde pertenece. Se <a>enfoca pero luego se oculta. Entonces el efecto general es el efecto deseado.

Sé que este es un hilo antiguo, pero en cuanto a los documentos de la interfaz de usuario, no hay solución para esto. Esto no requiere desenfoque o enfoque para funcionar. No estoy seguro si es el más elegante. Pero tiene sentido y es fácil de explicar a cualquiera.

Si solo tiene un campo en forma de diálogo Jquery y es el que necesita Datepicker, alternativamente, puede establecer el foco en el botón Cerrar (cruz) del diálogo en la barra de título del diálogo:

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

Llame a esto DESPUÉS de que se inicializó el diálogo, por ejemplo:

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

Porque el botón de cierre se representa después de que .dialog()se llama al.

Si está utilizando botones de diálogo, simplemente configure el autofocusatributo en uno de los botones:

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

Tengo el mismo problema.

La solución que hice fue agregar el cuadro de texto ficticio en la parte superior del contenedor de diálogo.

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

Como se mencionó, este es un error conocido con jQuery UI y debería solucionarse relativamente pronto. Hasta entonces...

Aquí hay otra opción, para que no tenga que meterse con tabindex:

Deshabilite el selector de fecha temporalmente hasta que se abra el cuadro de diálogo:

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

Funciona para mi.

Pregunta duplicada: cómo desenfocar la entrada del primer formulario en la apertura del diálogo

Para ampliar algunas de las respuestas anteriores (e ignorar el aspecto del selector de fecha auxiliar), si desea evitar que el focus()evento enfoque el primer campo de entrada cuando se abra su diálogo, intente esto:

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

Tuve un problema similar y lo resolví centrándome en el diálogo después de abrir:

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

Pero en mi caso, el primer elemento es un ancla, así que no sé si en su caso eso dejará abierto el selector de fechas.

EDITAR: solo funciona en IE

encontrar en jquery.ui.js

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

y reemplazar con

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

Se lanza jQuery 1.9 y no parece haber una solución. Intentar evitar el enfoque del primer cuadro de texto mediante algunos de los métodos sugeridos no funciona en 1.9. Creo que porque los métodos intentan desenfocar el foco o mover el foco se producen DESPUÉS de que el cuadro de texto en el cuadro de diálogo ya haya enfocado y hecho su trabajo sucio.

No puedo ver nada en la documentación de la API que me haga pensar que algo ha cambiado en términos de funcionalidad esperada. Desactivado para agregar un botón de apertura ...

Tuve un problema similar En mi página, la primera entrada es un cuadro de texto con el calendario jQuery UI. El segundo elemento es el botón. Como la fecha ya tiene valor, configuré el foco en el botón, pero primero agregué el disparador para desenfocar el cuadro de texto. Esto resuelve el problema en todos los navegadores y probablemente en todas las versiones de jQuery. Probado en la versión 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();

});   

Esto es realmente importante para teléfonos inteligentes y tabletas porque el teclado aparece cuando una entrada tiene el foco. Esto es lo que he hecho, agregue esta entrada al comienzo del div:

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

No funciona con el tamaño 0px. Supongo que es aún mejor con una imagen transparente real, .pngo no, .gifpero no lo he intentado.

Funciona bien hasta ahora en iPad.

Puedes agregar esto:

...

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

...

como primera entrada: <input type="text" style="position:absolute;top:-200px" />