Select récupère le focus

**Pelote2012** · 14/08/2013, 10h10

Bonjour,

Je viens de m'apercevoir d'un truc :

J'ai des modals, que je fais à la volée avec ajax ...
Quans j'ai un select et que je fini une action, mon focus revient directement sur mon select (ou peut-être mon premier élément de saisi, j'ai pas trouvé d'ex dans mon code de ce cas)
Par exemple j'ai une modal avec des images, un filtre par select en haut et un pied pour ajouter des images en bas. Je sélectionne une catégorie dans mon pied via un autre select et là ... automatiquement je remonte sur mon select de filtre, ce qui est un peu casse pied vue que je dois scroller pour aller à l'ajout.

J'ai le même comportement en cliquant sur une image pour faire apparaître une autre modal de Zoom. Quand je la ferme, le focus reva sur le select de filtre

J'ai mis des point d'arrêt partout, rien.
Je pense donc que c'est un comportement natif.

Pouvez vous me le confirmer ou me préciser. Je cherche à savoir comment faire pour l'éviter.

**danielhagnoul** · 14/08/2013, 11h52

Bonjour

Sans le code réel on partira d'un exemple simpliste :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// on met un attribut tabIndex sur l'élément du DOM qui recevra le focus, par exemple une division
<div tabIndex="1">Hello</div>
 
// un ou des select dans le code HTML

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// par exemple
$( "select" ).on( "change", function(){
    $( "[tabIndex='1']" ).trigger( "focus" );
});

**Pelote2012** · 14/08/2013, 12h04

Merci pour ta réponse.

J'ai un peu de mal à comprendre ce que fait ce code.

voici mon code pour construire mon tableau

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
function GetFiles(filtreUpImg, IdGros, PathImgGros, DossierMobilier, LstTypeFile) {
    $.ajax({
        type: "POST",
        url: "Edit_Grossistes.aspx/GetLstFiles",
        data: '{"IdGros":' + IdGros +  ',"PageEnCours":"' + document.location.href.toString() + '"}',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (msg) {
            if (msg.d.Retour.Reussi == true) {
                BuildLstFiles(msg.d.LstFil,IdGros, PathImgGros, DossierMobilier);
                BuildFctLstFiles(filtreUpImg, IdGros, PathImgGros, DossierMobilier, LstTypeFile);
            }
            else {
                AfficheMsgRetour(msg.d.Retour);
            }
        },
        error: function () {
            var Err =  {
                Reussi : false,
                Titre:"Liste de fichiers",
                Msg : "Erreur accès liste fichiers"
            };
            AfficheMsgRetour(Err);
        }
    });
}
 
function BuildLstFiles(msg,IdGros, PathImgGros, DossierMobilier){
    var table = '<table id="tblFiles" border="0"><tr class="Entete"><td width="100"></td><td width="300">Libellé</td><td width="70">Type<br /><select id="FiltreTypFile" tabIndex="1"></select></td><td width="25"></td></tr>';
 
    for (var post in msg) {
        var row = '<tr id=' + msg[post].Id + '>';
        row += '<td><img id="LeLogo' + msg[post].Id + '" width="90" class="JQImgAgrand CursorHand" src="' + PathImgGros + IdGros + DossierMobilier + msg[post].FileName + '"/></td>';
        row += '<td><span title="' +  msg[post].Descriptif  + '" >' + msg[post].Libelle + '</span></td>';
        row += '<td>' + msg[post].Type + '</td>';
        row += '<td class="TDIcone"><img src="/Images/suppr.png" alt="Supprimer" class="JQDelete"></td>';
        row += '</tr>';
        table += row;
    }
 
    //Ajout
    table += '<tr class="Entete2"><td><div style="float: left"><br /><div id="btnUpLoad" style="display: table-cell">Upload</div><br />';
    table += '<input type="hidden" id="LogoName" /><label id="AfficheUpload"></label></div>';
    table += '<br /><br /><br /><br /><label class="error" id="Img_error"></label></td>';
    table += '<td><input type="text" id="txtAddLibFil" style="width:98%;"/><br /><label class="error" for="txtAddLibFil" id="txtAddLibfil_error"></label></td>';
    table += '<td><select id="lstAddTypFile"></select><br /><label class="error" for="lstAddTypFile" id="lstAddTypFile_error"></label></td>';
    table += '<td rowspan="2" align="center"><img src="/Images/add.png" alt="Ajouter" id="AddFile"/></td></tr>';
    table += '<tr class="Entete2"><td>Descriptif</td><td colspan="2"><textarea  id="txtAddDesc" rows="4" style="width:98%;"></textarea></td></tr>';
    table += '</table>';
 
    $('div#MPEditComposant').html(table);
 
}
 
function BuildFctLstFiles(filtreUpImg, IdGros, PathImgGros, DossierMobilier, LstTypeFile) {
 
    $('.error').hide();
    $('#btnUpLoad').button();
    BuildTLD('btnUpLoad', filtreUpImg, 'AfficheUpload', 'LogoName'); 
 
    $('#FiltreTypFile').append($('<option>', { selected: 'selected', value: "Tous", text: "Tous" }));
    BuildLstTypeFile('FiltreTypFile', null, LstTypeFile);          
 
    //Select change sur filtre de type de fichier
    $('#FiltreTypFile').change(function () {
        var Typ = $(this).val();
        $("#tblFiles > tbody > tr").each(function () {
            var RowID = $(this).attr("id");
            if  (!isNaN(RowID)){
                if (Typ == $(this).find("td:eq(2)")[0].innerHTML || Typ=="Tous"){
                    $("#" + RowID).show();
                }
                else{
                    $("#" + RowID).hide();
                }
            }
        }); 
    });
 
    $('#lstAddTypFile').append($('<option>', { selected: 'selected', value: "-1", text: "Type de fichier ?" }));
    BuildLstTypeFile('lstAddTypFile', null, LstTypeFile);     
 
    $('.JQImgAgrand').click(function () {
        var $tr = $(this).parents('tr:eq(0)');
        var id = $tr.attr('id');
        $('#MPEditCouleur').html('<img id="ImgAgrand" />');
        $('#ImgAgrand').attr("src", $('#LeLogo' + id).attr("src"));
        $('#MPEditCouleur').dialog('option', 'title', 'Zoom sur image');
        $("#MPEditCouleur").dialog("open");
    });
 
    $('.JQDelete').click(function () {
        var $tr = $(this).parents('tr:eq(0)');
        var id = $tr.attr('id');
        DeleteFile(id);
    });
 
    $("#AddFile").click(function () {
        $('.error').hide();
 
        var Lib = ControlNoEmpty($('#txtAddLibFil'), $("label#txtAddLibfil_error"), "Libellé");
        if (Lib == null) {
            return false;
        }
 
        var CtrlImgName = $('#LogoName');
        var ImgName = CtrlImgName.text();
        if (ImgName == "") {
            $("#Img_error").text("Fichier obligatoire.");
            $("#Img_error").show();
            return false;
        }
 
        var TypeFichier = LstRequired($('#lstAddTypFile'), $("label#lstAddTypFile_error"), "Type fichier", false);
        if (TypeFichier == null) {
            return false;
        }
 
        var myData = {
            IdGros: IdGros,
            Path: ImgName,
            TypeFichier: TypeFichier,
            Libelle: Lib,
            Descriptif: $('#txtDesc').text(),
            PageEnCours: document.location.href
        };
 
        $.ajax({
            type: "POST",
            url: "Edit_Grossistes.aspx/AddFile",
            data: "{MesDonnees:" + JSON.stringify(myData) + "}",
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            success: function (msg) {
                AfficheMsgRetour(msg.d);
                if (msg.d.Reussi == true) {
                    GetFiles(filtreUpImg, IdGros, PathImgGros, DossierMobilier, LstTypeFile);
                    $('#LogoName').text("");
                    $('#txtAddLibFil').text("");
                    $('#lstAddTypFile').val("-1");
                    $('#txtAddDesc').text("");    
                }
            },
            error: function () {
                var Ret = {
                    Titre: "Enregistrement fichier",
                    Reussi: false,
                    Msg: "Erreur accès enregistrement fichier"
                };
                AfficheMsgRetour(Ret);
            }
        });
 
        return false;
    });
}
 
function DeleteFile(FileId) {
    var Ret = {
        Titre: "Suppression fichier",
        Msg: "Etes-vous sûr de vouloir supprimer cette couleur ?",
        Fct: function () {
            $.ajax({
                type: "POST",
                url: "Edit_Grossistes.aspx/DelFile",
                data: '{"IdFile":' + FileId + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: function (msg) {
                    if (msg.d.Reussi == true) {
                        $("#" + FileId).hide();
                    }
                    else {
                        AfficheMsgRetour(msg.d);
                    }
                },
                error: function () {
                    var Err = {
                        Reussi: false,
                        Titre: "Suppression fichier",
                        Msg: "Erreur accès suppression"
                    };
                    AfficheMsgRetour(Err);
                }
            });
        }
    }
    ConfirmIt(Ret);
}

En fait, dès que je clique sur Add ou sur supprimer ou quand je ferme la mmodal de Zoom je reviens sur la liste qui me sert de filtre.

J'ai mis un input avec un X à -500px et le focus n'est plus sur la liste mais ça remonte toujours. Donc par défaut le autofocus est sur le 1er élément.

**Pelote2012** · 14/08/2013, 15h21

En fait pour faire simple: est-il possible de supprimer cet autofocus et laissé le focus, là ou je l'ai mis en dernier

**Pelote2012** · 27/08/2013, 15h05

Bonjour,

Je me permets juste de relancer le sujet, je recherche toujours la solution

J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $('input').blur();

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $('select').blur();

mais rien ne change

**Pelote2012** · 27/08/2013, 16h22

Voilà j'ai fait un exemple simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Master.Master"
    CodeBehind="Autofocus.aspx.vb" Inherits="Jquery.Autofocus" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script language="javascript" type="text/javascript">
        $(function () {
 
            $('.JQBibliotheque').click(function () {
                GetFiles();
                $('#MPEditComposant').dialog('option', 'title', 'Gestion des fichiers');
                $("#MPEditComposant").dialog("open");
            });
 
            $("#MPEditCouleur").dialog({
                autoOpen: false,
                modal: true,
                width: "auto",
                position: ['center', 50],
                buttons: {
                    Fermer: function () {
                        $(this).html("");
                        $(this).dialog("close");
                    }
                },
                open: function (event, ui) {
                    $('#MPEditCouleur').css('overflow', 'visible');
                }
            });
 
            $("#MPEditComposant").dialog({
                autoOpen: false,
                modal: true,
                width: "auto",
                maxHeight: 300,
                position: ['center', 50],
                buttons: {
                    Fermer: function () {
                        $(this).html("");
                        $(this).dialog("close");
                    }
                }
            });
 
 
        });
 
        function GetFiles() {
            var lst = [{
                Id: 2,
                FileName: 'Images/logo.gif',
                Descriptif: '',
                Libelle: 'toto',
                Type: 'test'
            },
            {
                Id: 3,
                FileName: 'Images/logo.gif',
                Descriptif: '',
                Libelle: 'tata',
                Type: 'test'
            }];
            BuildLstFiles(lst);
            BuildFctLstFiles();
        }
 
        function BuildLstFiles(msg) {
            var table = '<table id="tblFiles" border="0"><tr class="Entete"><td width="100"></td><td width="300">Libellé</td><td width="70">Type<br /><select id="FiltreTypFile" tabIndex="1"></select></td><td colspan="2"></td></tr>';
 
            for (var post in msg) {
                var row = '<tr id="File' + msg[post].Id + '">';
                row += BuildRowFile(msg[post]);
                row += '</tr>';
                table += row;
            }
 
            //Ajout
            table += '<tr class="Entete2"><td colspan=2><input type="text" id="txtAddLibFil" style="width:98%;"/><br /><label class="error" for="txtAddLibFil" id="txtAddLibfil_error"></label></td>';
            table += '<td><select id="lstAddTypFile"></select><br /><label class="error" for="lstAddTypFile" id="lstAddTypFile_error"></label></td>';
            table += '<td rowspan="2" colspan="2" align="center"><img src="/Images/add.png" alt="Ajouter" id="AddFile"/></td></tr>';
            table += '<tr class="Entete2"><td>Descriptif</td><td colspan="2"><textarea  id="txtAddDesc" rows="4" style="width:98%;"></textarea></td></tr>';
            table += '</table>';
 
            $('div#MPEditComposant').html(table);
 
        }
 
        function BuildRowFile(Fil) {
            var row = '<td><img id="LeLogo' + Fil.Id + '" width="90" class="JQImgAgrand" src="' + Fil.FileName + '"/></td>';
            row += '<td title="' + Fil.Descriptif + '">' + Fil.Libelle + '</td>';
            row += '<td>' + Fil.Type + '</td>';
            row += '<td class="TDIcone"><img src="/Images/edit.png" alt="Modifier" class="cssModifyFile"></td>';
            row += '<td class="TDIcone"><img src="/Images/suppr.png" alt="Supprimer" class="cssDeleteFile"></td>';
 
            return row;
        }
 
        function BuildFctLstFiles() {
 
            $('.error').hide();
 
            $('#FiltreTypFile').append($('<option>', { selected: 'selected', value: "Tous", text: "Tous" }));
 
            $('#lstAddTypFile').append($('<option>', { selected: 'selected', value: "-1", text: "Type de fichier ?" }));
 
            $('.JQImgAgrand').click(function () {
                var $tr = $(this).parents('tr:eq(0)');
                var id = $tr.attr('id');
                $('#MPEditCouleur').html('<img id="ImgAgrand" />');
                $('#ImgAgrand').attr("src", $('#LeLogo' + id.substring(4)).attr("src"));
                $('#MPEditCouleur').dialog('option', 'title', 'Zoom sur image');
                $("#MPEditCouleur").dialog("open");
            });
 
            $("#AddFile").click(function () {
                $('.error').hide();
                return false;
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <span class="JQBibliotheque">Gestion des fichiers</span>
    <div id="MPEditComposant" title="Edition composant">
    </div>
    <div id="MPEditCouleur" title="Edition composant">
    </div>
</asp:Content>

cliquer sur Gestion des fichiers
une modal s'ouvrira
Si je scrolle en bas de la modal
et que je clique sur une image pour agrandir (JQImgAgrand) je focus se met sur la 1ere liste et remonte mon scroll, ce que je ne veux pas

Select récupère le focus

jQuery

Vue hybride

Discussions similaires

Partager

Partager