javascript - una - Evite que el cuadro de diálogo de la interfaz de usuario de jQuery configure el foco en el primer cuadro de texto

qué es el prompt en javascript

Question

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

El problema es que el cuadro de diálogo de la interfaz de usuario de jQuery (''abierto'') de alguna manera activa el primer cuadro de texto para que tenga el foco, lo que hace que el calendario del selector de fechas se abra inmediatamente.

Por lo tanto, estoy buscando una forma de evitar que el enfoque suceda de forma automática.

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

Answer 1

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

Todo lo que tiene que hacer es crear un elemento ficticio como su primera entrada en el cuadro de diálogo. Absorberá el enfoque 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

Answer 2

Agregue un tramo oculto encima, use ui-helper-hidden-accessible para ocultarlo mediante 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>

Answer 3

Aquí está la solución que implementé después de leer el ticket jQuery UI # 4731 , 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 autocompletos a la página, agregue la siguiente línea de código:

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

Eso desactiva el comportamiento de "autoenfoque" de jQuery. Para asegurarse de que su sitio siga 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 seguir abordando la accesibilidad cuando las opciones de autocompletar se seleccionan a través del teclado, anulamos la devolución de llamada de "autocompletar" de jQuery UI y agregamos algún 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 autocomplementos a los 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;
}

Answer 4

Bueno, es genial que nadie haya encontrado la solución por el momento, pero parece que tengo algo para ti. La mala noticia es que el diálogo capta 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 concentrarme 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 enfoque no se establece en ningún lugar y permanece en el lugar original. Funciona con información sobre herramientas con solo un texto simple, pero no probado para diálogos más funcionales en los que puede ser importante tener un diálogo visible en el momento de 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 cuadro de diálogo (después de mi código).

Probado en IE, FF y Chrome.

Espero que esto ayude a alguien.

Answer 5

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

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

Desactive 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 primera entrada de formulario en la ventana de diálogo

Answer 6

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

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

Fiddle

Esto afectará a todos los dialog 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 el atributo autofocus / elemento tabbable / o volver al diálogo mismo. Como su uso es solo enfocarse en un elemento, no debería haber ningún problema reemplazándolo por un noop .

Answer 7

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

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

Se encuentra aquí: unable-to-remove-autofocus-in-ui-dialog

Answer 8

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

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 jQuery o cambiar el comportamiento.

tabindex -1 funciona como una solución alternativa.

Answer 9

Estaba buscando un problema diferente pero la misma causa. El problema es que el diálogo establece el foco en el primer <a href="">.</a> que encuentra. Entonces, si tiene mucho texto en el 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 abajo. 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 de su cuadro de diálogo.

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 a la que pertenece. El <a> se enfoca, pero luego se oculta. Entonces el efecto general es el efecto deseado.

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

Answer 10

Establezca el tabindex de la entrada en -1, y luego configure dialog.open para restaurar tabindex 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");
        }
    });
});

Answer 11

Esto es realmente importante para teléfonos inteligentes y tabletas porque el teclado aparece cuando una entrada tiene el foco. Esto es lo que hice, agregue esta entrada al comienzo de la 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, ya sea .png o .gif pero no lo he intentado.

Funciona bien hasta ahora en iPad.

Answer 12

Esto puede ser un comportamiento del navegador, no un problema del complemento jQuery. ¿Has intentado eliminar el enfoque 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.

Answer 13

Me di cuenta de esto mientras jugaba.

Encontré con estas soluciones para eliminar el foco, causó que la tecla ESC dejara de funcionar (es decir, cerrar el cuadro de diálogo) al entrar por primera vez en el cuadro de diálogo.

Si se abre el cuadro de diálogo 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 tecla.

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 es visible, y luego la tecla ESC funciona.

Answer 14

Mi solución:

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

Answer 15

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

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

Answer 16

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

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

Answer 17

Puedes agregar esto:

...

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

...

Answer 18

Si está utilizando botones de diálogo, simplemente configure el atributo de autofocus 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>

Answer 19

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

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

Llame a este DESPUÉS de que se haya inicializado el cuadro de diálogo, por ejemplo:

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

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

Answer 20

Solución simple:

Solo crea un elemento invisible con tabindex = 1 ... Esto no enfocará el datepicker ...

p.ej.:

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

Answer 21

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

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

Answer 22

Tengo el mismo problema.

La solución alternativa 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;" />

Answer 23

Tengo un problema similar. Abro un cuadro de diálogo de error cuando la validación falla y atrapa el foco, al igual que Flugan lo muestra en su answer . El problema es que incluso si ningún elemento dentro del cuadro de diálogo puede tabularse, el cuadro de diálogo en sí sigue enfocado. Aquí está el código original no modificado 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 lugar de eso se le pide que salga de la página, porque se golpea el retroceso fuera de un control de entrada.

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

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

Answer 24

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 cuadro de diálogo. Esta entrada está oculta en cada apertura del diálogo y se muestra de nuevo al cerrar.

Answer 25

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 tu caso dejará abierto el marcador de fecha.

EDITAR: solo funciona en IE

Answer 26

Tuve un problema similar. En mi página, la primera entrada es un cuadro de texto con el calendario de jQuery UI. El segundo elemento es el botón. Como la fecha ya tiene valor, fijé el foco en el botón, pero primero agregue el desencadenador para el desenfoque en 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();

});   

Answer 27

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

Answer 28

jQuery 1.9 se lanza y no parece haber una solución. Intentar evitar el foco del primer cuadro de texto por algunos de los métodos sugeridos no está funcionando en 1.9. Creo que, debido a que los métodos intentan desenfocar el foco o mover el foco, ocurren DESPUÉS de que el cuadro de texto en el cuadro de diálogo ya se haya enfocado y haya hecho su trabajo sucio.

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

Answer 29

jQuery UI 1.10.0 Changelog enumera el ticket 4731 como arreglado.

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

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

Por lo tanto, marque un elemento con el atributo de autofocus y ese es el elemento que debe enfocarse:

<input autofocus>

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

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

1. El primer elemento dentro del diálogo con el atributo de autofocus
2. El primero :tabbable elemento :tabbable dentro del contenido del diálogo
3. El primero :tabbable elemento :tabbable dentro del botón del diálogo
4. El botón Cerrar del diálogo
5. El diálogo mismo

Answer 30

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